在 Angular 1.4 中，通过具有隔离作用域的嵌套指令绑定函数失败 [英] Binding functions through nested directives with isolated scope failing in Angular 1.4

问题描述

1.4 更新似乎在嵌套指令中绑定函数时引入了一个问题.我有一个示例 plunker:http://plnkr.co/edit/fQLY0N8BTNs38VC8ikll

The 1.4 update seems to have introduced an issue when binding functions in nested directives. I have an example plunker: http://plnkr.co/edit/fQLY0N8BTNs38VC8ikll

代码:

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

app.controller('myCtrl', function(){
  this.searchFunction = function(term) {
    console.log('you searched for ' + term);
  }
 });

 app.directive('outerDirective', function(){
   return {
    restrict: 'E',
    scope: {
      outer: '&'
    },
    template: '<inner-directive inner="cx.outer(term)"></inner-directive>',
    controller: function(){

    },
    controllerAs: 'cx',
    bindToController: true
  };
});

app.directive('innerDirective', function(){
  return {
    restrict: 'E',
    scope: {
      inner: '&'
    },
    template: '<a ng-click="cx.execute()">Click</a>',
    controller: function(){
      this.execute = function(){
        this.inner('fred');
      }
    },
    controllerAs: 'cx',
    bindToController: true
  };
});

这在 1.3 中有效，但我应该在 1.4 中使用某种新方法吗?

This was working in 1.3 but is there some new way I should do this in 1.4?

点击链接，您将在控制台中看到以下错误:

Clicking on the link you'll see the following error in the console:

TypeError: 不能使用 'in' 运算符在 fred 中搜索 'cx'在 fn (评估在 (https://code.angularjs.org/1.4.0/angular.js:13036:15), :2:54)在目的地.(匿名函数)[作为内部](https://code.angularjs.org/1.4.0/angular.js:8689:22)在执行 (http://run.plnkr.co/zE9xlCQNMBrOZZgi/script.js:35:14)在 fn (评估在 (https://code.angularjs.org/1.4.0/angular.js:13036:15), :2:237)在回调 (https://code.angularjs.org/1.4.0/angular.js:23090:17)在 Scope.$eval (https://code.angularjs.org/1.4.0/angular.js:15719:28)在 Scope.$apply (https://code.angularjs.org/1.4.0/angular.js:15818:23)在 HTMLAnchorElement.(https://code.angularjs.org/1.4.0/angular.js:23095:23)在 HTMLAnchorElement.eventHandler (https://code.angularjs.org/1.4.0/angular.js:3247:21)

TypeError: Cannot use 'in' operator to search for 'cx' in fred at fn (eval at (https://code.angularjs.org/1.4.0/angular.js:13036:15), :2:54) at destination.(anonymous function) [as inner] (https://code.angularjs.org/1.4.0/angular.js:8689:22) at execute (http://run.plnkr.co/zE9xlCQNMBrOZZgi/script.js:35:14) at fn (eval at (https://code.angularjs.org/1.4.0/angular.js:13036:15), :2:237) at callback (https://code.angularjs.org/1.4.0/angular.js:23090:17) at Scope.$eval (https://code.angularjs.org/1.4.0/angular.js:15719:28) at Scope.$apply (https://code.angularjs.org/1.4.0/angular.js:15818:23) at HTMLAnchorElement. (https://code.angularjs.org/1.4.0/angular.js:23095:23) at HTMLAnchorElement.eventHandler (https://code.angularjs.org/1.4.0/angular.js:3247:21)

推荐答案

看起来您遇到了错误，因为您没有使用 {param: value} 方法来调用函数指令内.plunkr 也缺少 cx.outer 函数，所以我不确定我们希望看到什么.

It looks like you're experiencing an error because you're not using the {param: value} approach to calling the function within the directive. The plunkr also lacks the cx.outer function so I'm not sure what we'd expect to see happen.

我已经更新了您的 plunkr，以证明它可以通过显式参数传递与 Angular 1.4 一起使用:http://plnkr.co/edit/T7aasD?p=preview.

I've updated your plunkr to demonstrate it working with Angular 1.4 with explicit parameter passing: http://plnkr.co/edit/T7aasD?p=preview.

这篇关于在 Angular 1.4 中，通过具有隔离作用域的嵌套指令绑定函数失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！