函数（表达式）绑定不起作用。

29 浏览
0 Comments

函数（表达式）绑定不起作用。

我无法弄清楚为什么这个plnkr不起作用。\n我试图将一个简单的函数从父控制器绑定到子自定义指令。如果我使用&，它不起作用，但如果我使用=或<，它就可以正常工作。我知道这是不好的做法，但为什么它可以工作而&不能？也许我忽略了一些非常简单的东西？\n以下是脚本：\nJS\n

var app = angular.module('myApp',['ngMaterial']);
app.controller('mainCtrl',mainCtrl);
function mainCtrl(){
  var main = this;
  main.test = function(){console.log("test")};
}
app.directive('myDirective',myDirective);
function myDirective(){
  return {
    scope: {},
    controller: myCtrl,
    controllerAs: "dir",
    bindToController: {
      //fn: '&'  //这个不起作用
      fn: '<' // 这个可以工作
    },
    template: 'click'
  };
  function myCtrl(){
  }
}

\nHTML\n

0

1 答案

0 Comments

问题的出现原因是在HTML中使用了错误的属性绑定方式。在AngularJS中，使用&绑定可以执行一个表达式。在这个例子中，dir.fn()只是获取了test属性。根据官方文档的描述，&或者&attr可以在父作用域中执行一个表达式。如果没有指定attr名称，则默认使用本地名称。

为了使其按预期工作，应该这样写：

<my-directive fn="main.test()"></my-directive>

问题的解决方法是在HTML中正确使用属性绑定。在这个例子中，正确的写法是fn="main.test()"，因为main.test()表达式会在&绑定中被传递并在每次调用dir.fn()时被计算。

关于为什么要在表达式后面加括号，我不太清楚，我确定这是我对Angular的一个细微误解。在纯JavaScript中，myFunction()表示执行一个函数，而myFunction表示函数引用。你能解释一下吗？

这样想是正确的。重要的是上下文。main.test()表达式在&绑定中以未评估的形式传递，并在每次调用dir.fn()时被计算。如果在Angular表达式中允许使用函数，可以使用fn="function () { return main.test() }"来实现相同的效果。

我错误引用了文档，并已经更新了关于&绑定的引用。

0