控制器与指令和独立作用域一样

Question

我想创建一个开发者可以更改标签的确定/取消按钮集

我有以下指令

angular.module('myApp')
  .directive('myButtons',function(){

    var ctrl = function ($scope) {
        var controller = this;
    };

    return {
        replace: true,
        restrict: 'E',

        scope: {
            cancelLabel: '@',
            saveLabel: '@',
            save: '&',
            cancel: '&'
        },

        templateUrl: 'directives/myButtons.html',

        controller: ctrl,
        controllerAs: 'controller',
        bindToController: true,
    };

});

指令的 html 包括以下内容

<div>
   <button>{{controller.cancelLabel}}</button>
   <button>{{controller.saveLabel}}</button>
</div>

调用此指令的实际 html 是

 <my-buttons saveLabel="Discard" cancelLabel="Cancel"></my-buttons>

但是，没有设置标签。如何从 html

中获取 saveLabel= 和 cancelLabel= 的内容

显示表单本身，如果我手动设置 controller.saveLabel = "save" 然后它在保存按钮上显示得很好

我知道我遗漏了一些非常简单的东西 ;)

谢谢

Answer 1

你的指令元素属性有误，应该用连字符（-）分隔，而不是使用驼峰式大小写。

标记

<my-buttons save-label="Discard" cancel-label="Cancel"></my-buttons>

控制器与指令和独立作用域一样

controllerAs with directives and isolated scope

javascript

angularjs

angularjs-directive

angularjs-scope

angularjs-controller