angular.js：如何从原来的DOM ngclick传递给指令的DOM？ [英] angular.js : how to pass ngclick from original dom to directive's dom?

问题描述

您好我有我的工作，这种可确定按钮指令，

Hi there I have this "confirmable" button directive which I am working on,

该HTML code将触发指令可确定

The html code that will trigger the directive 'confirmable'

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

指令：（CoffeeScript的）

the directive: (coffeescript)

  angular.module('buttons',[])

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

所以，最后的结果我希望看到这项指令生成的是

So the end result I'd like to see generated with this directive is

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

到目前为止，我得到了它的指令内联函数

So far I got it to work with a linking function inside the directive

  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

但我已经通过指令文件又理了一遍，发现与=，@，＆安培的范围财产;运营商，但我真的不能确定，如果他们是我所需要的。再有就是，我还需要了解，但目前似乎并没有对大家有所帮助用户可以在本transclude属性。因此，尽管我的链接功能的伎俩现在，但我想我应该问，看是否角度提供了一种更优雅的解决方案。

But I've gone through the directive documentation again, and found the scope property with the =, @, & operators but I am really unsure if they are what I need. Then there's this transclude properties which I still need to understand but at the moment doesn't seem to be helpful either. So while my linking function does the trick for now, but I thought I should ask to see if angular provides a more elegant solution.

谢谢！

推荐答案

它像你想从你的指令中调用从父范围的方法听起来我...

It sounds to me like you want to call a method from a parent scope from within your directive...

我已经把一个普拉克这里

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

(Sorry, I like JavaScript... so here goes)

下面就是你父控制器。

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

那么你的标志了。

Then your mark up

<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>'
   };
});

在范围声明在你的指令定义该位有什么联系父作用域函数引用到你的指令的范围，以便它可以在点击调用。这就是在＆放大器; 是有

The bit in the scope declaration in your directive definition is what ties the parent scope function reference to your directive's scope so it can be called on click. That's what the & is for there.

这篇关于angular.js：如何从原来的DOM ngclick传递给指令的DOM？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！