Binding functions through nested directives with i

问题:

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

Code:

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

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: 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)

回答1:

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.

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