Question

我正在尝试构建一个非常基本的 Angular指令，它会生成一个“div”，它可以有两个状态：“on”和“off”。

我天真地想出了一个可以在这里找到的实现：http://jsfiddle.net/wSz2f/

初始显示是正确的，但是当范围状态改变时，视觉状态不会更新。

这是Angular指令定义：

var test = angular.module("test", []);
test.directive("led", function()
{   
    return {
        restrict: "E",
        replace: true,
        template: "<div class='led led-off' ng-class='{ \"led-on\": isOn }'>{{isOn}}</div>",
        link: function(scope, element, attributes, controller)
        {
            scope.isOn = false;

            element.bind("click", function()
            {
                scope.isOn = !scope.isOn;
            });
        }
    };
});

我想我做的事情很愚蠢，但是......？

此外，就设计而言，我是采用“角度方式”还是有更好的做法？

感谢您的任何意见。：）

最终修改：

感谢 Mark ， Bertrand 和 James 的输入：

您必须在更新“isOn”属性后调用 范围。$ apply（） ，以使 Angular 了解其更改（想一想这就是它在其他框架中的工作原理，比如WPF / Silverlight和INotifyPropertyChanged接口，但不是Flex中的所有魔法绑定）或者使用 ng-click ，如 Bertrand所建议的那样
您必须为每个CSS类提供“ ng-class ”条件

Answer 1

在你的情况下，你必须解雇摘要

element.bind("click", function()
{
    scope.isOn = !scope.isOn;
    scope.$apply();
});

甚至更好，您可以在模板中使用ng-click指令来更改isOn的状态。

var test = angular.module("test", []);
test.directive("led", function()
{   
    return {
        restrict: "E",
        replace: true,
        template: "<div class='led led-off' ng-class='{ \"led-on\": isOn, \"led-off\": !isOn }' ng-click='onOff()'>{{isOn}}</div>",
        link: function(scope, element, attributes, controller)
        {
            scope.isOn = false;

            scope.onOff = function () {
                scope.isOn = !scope.isOn;
            }
        }
   };
});

这是fiddle

Answer 2

你的代码看起来不错。更新数据后，您错过了scope.$appy();。您需要致电scope.$apply();的确切内部原因对我来说只是部分清楚。我已经阅读了一些文章，但还不是专家。

更新了小提琴：http://jsfiddle.net/wSz2f/1/

阅读：http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

指令模板中的数据绑定

2 个答案: