Question

AngularJs新手在这里。首先，我可能会发现这一切都是错误的，所以请随意提供有关我的方法的任何建议。我试图做的是有一个应用模板的元素指令。这是最初的指令 myDirective 。

directives.directive('myDirective', [function() {

    var template = "<button type='button' class='btn btn-default' my-other-directive={{model}}>CLICK ME</button>";

    function link(scope, element, attrs) {

    };

    return {
        restrict: 'E',
        link: link,
        scope: {
            model: '@'
        },
        template: template
    };
}]);

我的HTML中引用了它。

<my-Directive model="ThisVaries"></my-Directive>

此处＆＃39; myOtherDirective＆＃39;

directives.directive('myOtherDirective', [function() {

    function link(scope, element, attrs) {

       var attr = attrs.myOtherDirective;

       element.bind('click', function() {
           scope.$parent.$parent.data.contact[attr].splice(0, 1); // need the index of the item
       });
    };

    return {
        restrict: 'A',
        link: link
    };
}]);

基本上，这是一个联系表单，用户将单击该按钮，它将从控制器scope.data.contact [variable] [index]中删除该项目。我能够获得传入的attr变量来访问祖父母＆＃39; scope.data变量，但单击按钮时模型不会更新。

我昨天刚刚开始使用指令，我很确定这不是正确的方法。任何帮助都会有所帮助。

我的controller.js文件中的控制器包含$ scope.data属性，该属性是整个html partial的控制器。

Answer 1

Angular通过执行$ digest循环中的所有内容来实现其神奇的双向绑定，但是当事件发生在已经由angular执行的内容之外时（例如由{{1}触发的click事件}）您需要通过element.bind('click'运行它来手动指示它返回$摘要周期。

应用于您的示例：

scope.$apply

修改指令的模板以访问与创建它的指令相同的范围

1 个答案: