带有指令和隔离作用域的控制器

controllerAs with directives and isolated scope

本文关键字：作用域 控制器 隔离 指令      更新时间：2023-09-26

我想创建一个确定/取消按钮集，开发人员可以在其中更改标签

我有以下指令

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=的内容?

显示表单本身，如果我手动设置控制器。saveLabel = "save"那么它就会出现在save按钮上

我知道我错过了一些非常简单的东西;)

谢谢

您的指令元素属性错误，应该用连字符(-)分隔，而不是使用驼峰大小写。

标记 

<my-buttons save-label="Discard" cancel-label="Cancel"></my-buttons>
相关文章：