如何使指令在每次使用时都具有唯一的作用域项 [英] How to make a directive have a unique scope item for each use

问题描述

我创建了一个指令并将其用于创建两个时间计数器，但是对于如何为每个时间计数器使用不同的作用域项，我有些困惑.

I have created a directive and used it to make two time counters however I am a bit confused about how I can use different scope items for each time counter.

我制作了 Plunkr 进行说明.

我不确定是否应该将范围项添加到mainCtrl控制器或指令范围.而且，如果我将其添加到指令范围中，那么如何将其与mainCtrl分开，以便以后可以保存?希望这个矮子更清晰一些.

I am not sure whether I should be adding to scope items to the mainCtrl controller or the directives scope. And if I add it to the directives scope then how can I make that apart of mainCtrl so that it could later be saved? hopefully the plunker is a bit clearer.

推荐答案

您需要声明一个隔离范围，以在指令范围内定义与父范围内的属性双向绑定的属性.

You need to declare an isolate scope to define a property on the directive's scope that is two-way-bound with a property on the parent scope.

例如，您的指令代码应为:

For example, your directive code should be:

app.directive('time', function() {
  return {
    templateUrl: 'time.html',
    restrict: 'E',
    scope: {
      Time: '=value'
    },
    link: function(scope, element, attrs) {
      element.addClass('time');
    }
  };
});

相关标记变为:

  <h1>Times</h1>
  <strong>Timer 1</strong> – I would like this to use the 'Time' scope item
  <br>
  <time value="Time"></time>
  <br>
  <br>
  <strong>Timer 2</strong> – I would like this to use the 'altTime' scope item
  <br>
  <time value="altTime"></time>

请参阅我的分叉的Plunkr .

其他一些评论:

• 用于命名属性的常规JS约定是使用camelCasing，而PascalCase保留给用作类的JS等效类的函数(即应使用new运算符调用的函数).
• 您在原始的plunkr中打了一个错字，在其中您将初始范围属性声明为alTime，但在标记中引用了altTime(我的Plunkr对此进行了修复).
• 在指令中进行双向绑定的是=运算符.有关更多信息，请参见 Angular文档.
• 在这种情况下，您无需使用ng-model来指向该值.从理论上讲，您可以，但是很难做，我不认为在这种情况下是必须的.只需按照我描述的那样使用隔离范围绑定即可.
• 请记住我认为的 AngularJS黄金法则:除非您有充分的理由将其省略，否则您的ng-model表达式中始终带有点(.)."这将意味着您始终在正确的作用域上设置对象的属性，即使该作用域在层次结构中位于多个级别.例如，在您的代码中，使用ng-click="Time = Time + 1"指令实际上将使您在指令的作用域上创建一个新的属性Time，即使该属性最初存在于父作用域上. br>
  请注意，我确实在我的Plunkr中违反了此规则，但这是因为我知道隔离范围的Time属性与父范围的Time属性不同 ，而AngularJS在后台使用隔离范围内的=说明符使两者保持同步.

• The general JS convention for naming properties is to use camelCasing, with PascalCase reserved for functions serving as the JS equivalent of classes (i.e. functions you should invoke with the new operator).
• You made a typo in your original plunkr where you declared the initial scope property as alTime but referred to altTime in the markup (my Plunkr fixes this).
• The thing that does the two-way binding in the directive is the = operator. See the Angular docs for more info.
• You don't need to use ng-model in this case to point to the value. You theoretically could, but it would be harder to do and I don't believe it is necessary in this case. Just use the isolate scope bindings as I described.
• Keep in mind what I consider the AngularJS Golden Rule: "Always have a dot (.) in your ng-model expressions, unless you have a good reason for omitting it." This will mean that you are always setting the property of an object on the correct scope, even if that scope is several levels up in the hierarchy. In your code, for instance, the use of the ng-click="Time = Time + 1" directive will actually have you creating a new property Time on the directive's scope, even if the property initially exists on a parent scope.
  
  Note I did violate this rule in my Plunkr, but that is because I knew that the isolate scope would have a Time property that was different to the parent scope's Time property, and the two are kept in sync by AngularJS under the covers by the use of the = specifier on the isolate scope.

这篇关于如何使指令在每次使用时都具有唯一的作用域项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！