Question

我有一个例子angularJS

<div ng-controller="testCtrl">

<test color1="color1" updateFn="updateFn()"></test>
</div>
 <script>
  angular.module('dr', [])
.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function() {
        alert('123');
    }
})
.directive('test', function() {
    return {
        restrict: 'E',
        scope: {color1: '=',
                updateFn: '&'},
        template: "<button ng-click='updateFn()'>Click</button>",
        replace: true,
        link: function(scope, elm, attrs) { 
        }
    }
});

</script>
</body>

</html>

我希望当我点击按钮时，会出现警告框，但没有任何显示。

任何人都可以帮助我吗？

Answer 1

要从隔离范围指令内部调用父作用域中的控制器函数，请在HTML中使用dash-separated属性名称，如OP所述。

此外，如果要向函数发送参数，请通过传递对象来调用该函数：

<test color1="color1" update-fn="updateFn(msg)"></test>

JS

var app = angular.module('dr', []);

app.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function(msg) {        
        alert(msg);
    }
});

app.directive('test', function() {
    return {
        restrict: 'E',
        scope: {
            color1: '=',
            updateFn: '&'
        },
        // object is passed while making the call
        template: "<button ng-click='updateFn({msg : \"Hello World!\"})'>
            Click</button>",
        replace: true,        
        link: function(scope, elm, attrs) {             
        }
    }
});

的 Fiddle

Answer 2

也许我遗漏了一些东西，但是虽然其他解决方案确实调用了父范围函数，但是没有能力从指令代码传递参数，这是因为update-fn正在使用固定参数调用updateFn() ，例如{msg: "Hello World"}。稍微改变就允许指令传递参数，我认为这些参数更有用。

<test color1="color1" update-fn="updateFn"></test>

请注意，HTML正在传递函数引用，即没有()括号。

<强> JS

var app = angular.module('dr', []);

app.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function(msg) {        
        alert(msg);
    }
});

app.directive('test', function() {
    return {
        restrict: 'E',
        scope: {
            color1: '=',
            updateFn: '&'
        },
        // object is passed while making the call
        template: "<button ng-click='callUpdate()'>
            Click</button>",
        replace: true,        
        link: function(scope, elm, attrs) {       
          scope.callUpdate = function() {
            scope.updateFn()("Directive Args");
          }
        }
    }
});

所以在上面，HTML调用本地作用域callUpdate函数，然后从父作用域“获取”updateFn并使用指令可以生成的参数调用返回的函数。

http://jsfiddle.net/mygknek2/

Answer 3

在你的'test'指令Html标记中，函数的属性名称不应该是camelCased，而是基于破折号。

所以 - 而不是：

<test color1="color1" updateFn="updateFn()"></test>

写：

<test color1="color1" update-fn="updateFn()"></test>

这是用于说明指令属性（例如update-fn函数）和函数之间差异的方法。

Answer 4

如何用双向绑定传递控制器功能？然后你可以在指令中使用它，就像在常规模板中一样（为了简单起见我剥离了不相关的部分）：

<div ng-controller="testCtrl">

   <!-- pass the function with no arguments -->
   <test color1="color1" update-fn="updateFn"></test>
</div>

<script>
   angular.module('dr', [])
   .controller("testCtrl", function($scope) {
      $scope.updateFn = function(msg) {
         alert(msg);
      }
   })
   .directive('test', function() {
      return {
         scope: {
            updateFn: '=' // '=' bidirectional binding
         },
         template: "<button ng-click='updateFn(1337)'>Click</button>"
      }
   });
</script>

我降落在这个问题上，因为我尝试了上面的方法，但不知怎的，它没有用。现在它完美无缺。

Answer 5

使用破折号和小写字母作为属性名称（如同其他答案所说）：

 <test color1="color1" update-fn="updateFn()"></test>

并使用“=”代替“＆amp;”在指令范围内：

 scope: { updateFn: '='}

然后你可以像任何其他函数一样使用updateFn：

 <button ng-click='updateFn()'>Click</button>

你去吧！

Answer 6

我不得不使用＆＃34; =＆＃34;绑定而不是＆＃34;＆amp;＆＃34;因为那不行。奇怪的行为。

Answer 7

@JorgeGRC感谢您的回答。不过，“也许”部分非常重要。如果确实有参数，则还必须在模板中包含该参数，并确保指定您的 locals ，例如updateFn({msg: "Directive Args"}。

AngularJS - 将函数传递给指令

7 个答案:

JS