3

我正在尝试构建一个非常基本的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”属性后调用scope.$apply()以使Angular知道它的更改（考虑一下，这也是它在其他框架中的工作方式，例如带有 INotifyPropertyChanged 接口的 WPF/Silverlight，但不是在Flex 及其所有魔术绑定）或使用ng-click像Bertrand建议的那样
  • 您必须为每个 CSS 类提供“ ng-class ”条件
4

2 回答 2

5

在您的情况下，您必须触发摘要

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;
            }
        }
   };
});

这是一个小提琴

于 2013-05-28T18:17:35.227 回答
3

你的代码看起来不错。scope.$appy();更新数据后您丢失了。为什么你需要打电话的确切内部原因scope.$apply();对我来说只是部分清楚。我已经阅读了几篇关于它的文章，但还不是专家。

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

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

于 2013-05-28T18:18:47.880 回答