AngularJS指令/组件参数:绑定还是DOM访问?

时间:2017-12-01 11:57:45

标签: angularjs

考虑这种一般情况,你有一个指令必须处理作为参数给出的输入。

我通常做的是这样的事情:

directive(function() {
  scope {
    param: '@'
  },
  bindToController: true,
  link: function(scope, iElem, iAttrs, ctrl) {
    process(ctrl.param);
  }
}

但我经常看到以下内容:

directive(function() {
  link: function(scope, iElem, iAttrs) {
    process(iAttrs.param);
  }
}

由于某种原因看起来"错误"我的方式,尽管它有效。我的想法是,当你不需要时,它违背了Angular哲学直接搞乱DOM。此外,您的指令隐式公开了一个帮助您验证输入的接口的第一种方式,而第二种方式您的指令和使用它的模板将高度耦合。

为简单起见,我的示例是简单的属性绑定,但这同样适用于'<foo''=foo'绑定内插值并按attrs.foo处理它们。

我还没有在互联网上找到任何,指出其中一种做法不正确,我想知道是不是只是在思考什么可能只是风格问题偏好或者它在概念上是错误的。

如果这只是一个偏好问题,为什么我的推理错了呢?

1 个答案:

答案 0 :(得分:1)

它确实看起来更多 angular 通过scope属性将输入传递给指令,但这也将在幕后创建一个新的隔离范围。虽然在大多数情况下这可能是合乎需要的,但有时你需要在同一个html元素上使用两个指令。

在这种情况下,尝试通过范围将输入传递给第二个指令,您将获得可爱的

Error: $compile:multidir //and some more info here

所以你被迫使用属性,或者重新思考你的方法,并尝试用你只做一个指令做任何事情。

最重要的是,虽然使用scope属性更清洁,让它为你执行所有的验证,插值等,但并不总是可行。