Question

我有一个控制器，它调用返回课程列表的服务。每门课程都有一个名为＆＃39; percentageDone＆＃39;

的属性

我想根据这个值为我的div分配一些CSS。

我发现有两种方法可以做到这一点。可能还有更多，我是Angular的新手。事情是我不确定什么是最好的方式。在性能和一般最佳角度练习方面。我意识到我可以使用ng-class，但我正在使用这个练习来学习Angular。

所以我的Div

<div ng-repeat="e in courses">
  <div completion-color="{{e.percentageDone}}"></div>
</div>

使用此指令

myApp.directive('completionColor', function () {
  return {
   restrict: 'A',
   link: function (scope, el, attrs) {
    var donePerc = attrs['completionColor'];
     if (donePerc < 33) {
      el.addClass('progress-bar-danger');
     }
     else if (donePerc >= 33 && newVal < 66) {
      el.addClass('progress-bar-warning');
     }
     else if (donePerc >= 66) {
      el.addClass('progress-bar-success');
     }
   }
  };
});

或其他方式

<div completion-color="e.percentageDone"></div>

和js

myApp.directive('completionColor', function () {
    return {
        restrict: 'A',
        link: function (scope, el, attrs) {
            scope.$watch(attrs['completionColor'], function (newVal) {
                if (newVal < 33) {
                    el.addClass('progress-bar-danger');
                }
                else if (newVal >= 33 && newVal < 66) {
                    el.addClass('progress-bar-warning');
                }
                else if (newVal >= 66) {
                    el.addClass('progress-bar-success');
                }
            });
        }
    };
});

我喜欢我不必将{{}}放在我的指令中，但一般来说数据不会有太大变化。所以不确定我需要使用$ .watch。

Answer 1

我会说api.test.loc/v1/products?ProductSearch[available]=1&ProductSearch[name]=iphone是你应该在这里使用的最后一件事。

我自己认为使用$watch没问题，这就是它们的用途。但是你可以选择其他选项，你可以使用一次性绑定（https://docs.angularjs.org/guide/expression），如果你使用的是角1.3.X，这样你就可以提高性能，因为角度没有不要留意：

{{}}

使用指令中的范围（也可以使用隔离）：

<div ng-repeat="e in courses">
  <div completion-color="{{::e.percentageDone}}"></div>
</div>

现在，您可以在链接功能中使用scope: { completionColor: "@" },。

Angular Directive：使用$ watch或传入绑定值

1 个答案: