Question

您好，我正在制作这个“确认”按钮指令，

将触发指令'确认'的html代码

      <span confirmable ng-click='users.splice($index,1)'></span>

指令：（coffeescript）

  angular.module('buttons',[])

  .directive 'confirmable', () ->
    template: """
      <button class='btn btn-mini btn-danger'>
        Destroy
      </button>
    """
    replace: yes

因此，我希望看到使用此指令生成的最终结果是

      <button class='btn btn-mini btn-danger' ng-click='users.splice($index,1)'>
        Destroy
      </button>

到目前为止，我已经使用了指令

中的链接函数

  angular.module('buttons',[])

  .directive 'confirmable', () ->
    template: """
      <button class='btn btn-mini btn-danger'>
        Destroy
      </button>
    """
    replace: yes
    link: (scope, el, attrs) ->               <---------- linking function
      $(el).attr 'ng-click', attrs.ngClick

但是我再次阅读了指令文档，并找到了带有=，@和＆amp;的范围属性。运营商，但我真的不确定他们是否是我需要的。然后是这个转换属性，我仍然需要了解，但目前似乎也没有帮助。因此，虽然我的链接功能现在可以解决问题，但我想我应该问一下角度是否能提供更优雅的解决方案。

谢谢！

Answer 1

听起来我想要从你指令中的父作用域调用一个方法......

我已将Plunk here

组合在一起

（对不起，我喜欢JavaScript ......所以这里有）

这是你的父母控制者。

app.controller('ParentCtrl', function($scope) {
    $scope.fooCalled = 0;
    $scope.foo = function() {
        $scope.fooCalled++;
    };
});

然后你的标记

<div ng-controller="ParentCtrl">
   Foo Called: {{fooCalled}}<br/>
   <button ng-click="foo()">Call From Parent</button><br/>
   <custom-control custom-click="foo()"></custom-control>
</div>

你的指令声明：

app.directive('customControl', function(){
   return {
     restrict: 'E',
     scope: {
        innerFoo: '&customClick'
     },
     template: '<button ng-click="innerFoo()">Call From Control</button>'
   };
});

指令定义中scope声明中的位是将父作用域函数引用与指令范围联系起来的，因此可以在单击时调用它。这就是&的用途。

Answer 2

你做得对。控制器用于在指令之间共享通用功能;你这里不需要一个。此案例非常简单，您甚至不需要链接功能：

http://jsfiddle.net/V7Kpb/12/

在Angular方面，在链接阶段复制指令属性并没有做任何事情。你只需要一个带有ng-click属性的按钮，但是在Angular处理完DOM后添加了该按钮。

另请注意，element作为链接函数的第二个参数已经是jQLite（如果你也有链接函数，也可能是完整的jQuery。）不需要jQuerify它。

另外，关于隔离范围（=，@和＆amp;你提到）。这是一个可爱优雅的语法，但最大的缺点是同一元素上的任何其他指令也与范围隔离。因此，如果您想使用ngModel，这是常见的事情，您不能使用隔离范围。实际上即使在这种情况下，如果你使用隔离范围ng-click停止工作。因为它将尝试计算包含未在范围{}属性中显式声明的内容的表达式。

Answer 3

如果您在链接阶段操作DOM并希望将角度逻辑添加到其元素，则需要编译受影响的元素。让angular random_column = rand() % (columns - 25);注入并在完成DOM处理并添加$compile指令后调用它。

＆＃13;

ng-*

＆＃13;

angular.js：如何将ngclick从原始dom传递给指令的dom？

3 个答案: