10

您好，我正在处理这个“可确认”按钮指令，

将触发指令“可确认”的 html 代码

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

指令：（咖啡脚本）

  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

但是我再次浏览了指令文档，并找到了带有 =、@ 和 & 运算符的范围属性，但我真的不确定它们是否是我需要的。然后是我仍然需要了解的这个嵌入属性，但目前似乎也没有帮助。因此，虽然我的链接功能现在可以解决问题，但我想我应该问一下 angular 是否提供了更优雅的解决方案。

谢谢！

4

3 回答 3

6

在我看来，您想从指令中的父范围调用方法...

我在这里拼凑了一个Plunk

（对不起，我喜欢 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将父作用域函数引用与指令作用域联系起来，因此可以在单击时调用它。这就是&那里的用途。

于 2012-10-23T22:11:19.163 回答
1

你做对了。控制器用于在指令之间共享通用功能；你在这里不需要。此外，这种情况非常简单，您甚至不需要链接功能：

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

就 Angular 而言，在链接阶段复制指令属性不会做任何事情。你只会有一个带有ng-click属性的按钮，但它是在 Angular 处理 DOM 之后添加的。

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

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

于 2012-10-24T05:10:41.800 回答
1

如果您在链接阶段操作 DOM 并希望向其元素添加角度逻辑，则需要编译受影响的元素。$compile在完成 DOM 处理并添加ng-*指令后，让 Angular 注入并调用它。

function MyDirective($compile)
{
    return {
        
        restrict: "AE",
        templateUrl: "/path",
        link: (scope, element, attributes) => 
        {
            // Add your directives

            $compile(element.contents())(scope);
        }
    };
}

于 2015-08-07T03:20:14.447 回答