通过与隔离范围在1.4角嵌套失败绑定指令功能 [英] Binding functions through nested directives with isolated scope failing in Angular 1.4

问题描述

1.4更新似乎嵌套指令绑定功能时，都推出了一个问题。我有一个例子plunker： http://plnkr.co/edit/fQLY0N8BTNs38VC8ikll

code：

  VAR应用= angular.module（'对myApp'，[]）;app.controller（'myCtrl'，函数（）{
  this.searchFunction =功能（项）{
    的console.log（'您搜索+期）;
  }
 }）; app.directive（'outerDirective'，函数（）{
   返回{
    限制：'E'，
    范围： {
      外：'和;'
    }，
    模板：'＆LT;内指令内=cx.outer（项）＆GT;＆LT; /内指令＆GT;，
    控制器：功能（）{    }，
    controllerAs：CX，
    bindToController：真
  };
}）;app.directive（'innerDirective'，函数（）{
  返回{
    限制：'E'，
    范围： {
      内部：'和;'
    }，
    模板：'＆LT;一个NG点击=cx.execute（）＆gt;点击＆LT; / A＆GT;，
    控制器：功能（）{
      this.execute =功能（）{
        this.inner（'弗雷德'）;
      }
    }，
    controllerAs：CX，
    bindToController：真
  };
}）;
 

这是工作在1.3，但有一些新的方式，我应该在1.4这样做吗？

点击你会看到下面的错误在控制台的链接：

  

类型错误：在运营商不能使用搜索弗雷德CX
      在FN（在的eval（ https：//开头code .angularjs.org / 1.4.0 / angular.js：13036：15 ）：2：54）
      。在目的地（匿名函数）作为内（的https： //$c$c.angularjs.org/1.4.0/angular.js:8689:22 ）
      在执行（ http://run.plnkr.co/zE9xlCQNMBrOZZgi/script.js： 35:14 ）
      在FN（在的eval（ https：//开头code .angularjs.org / 1.4.0 / angular.js：13036：15 ）：2：237）
      在回调（ HTTPS：//$c$c.angularjs。组织/ 1.4.0 / angular.js：23090：17 ）
      在范围$的eval（的https：// code .angularjs.org / 1.4.0 / angular.js：15719：28 ）
      。在$范围应用（ https：//开头code .angularjs.org / 1.4.0 / angular.js：15818：23 ）
      在HTMLAnchorElement。 （的https：//$c$c.angularjs.org/ 1.4.0 / angular.js：23095：23 ）
      在HTMLAnchorElement.eventHandler（ https：//开头code。 angularjs.org/1.4.0/angular.js:3247:21 ）

解决方案

它看起来像你，因为你不使用时遇到错误的 {参数：值} 方法调用指令中的功能。该plunkr也缺乏 cx.outer 函数，所以我不知道是什么，我们希望看到发生了。

我已经更新您的plunkr以证明其与角1.4有明确参数传递工作：的 http://plnkr.co/edit/T7aasD?p=$p$pview 。

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)

解决方案

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.

这篇关于通过与隔离范围在1.4角嵌套失败绑定指令功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！