Question

我希望rewrite this fiddle作为指令。这是我对Angular的第一次实验。我实际上从w3学校得到了这个想法，dom manipulation

我认为我的小提琴很好写，然而，在阅读coupling behaviour to a directive may be an anti design pattern之后，我再次感到茫然。所以将元素设计为

<photo>
    <img ng-click="toggleOnOff()" ng-src="{{'togglePhotoSrc()'}}"/>

似乎没有被推荐。正确？

我想把它解决为一个孤立的范围。我想在指令中知道这两个网址。如果可能的话，我想在不使用element.addClass的情况下这样做。

设计建议与工作实例一样受到重视。

编辑：我得到了这个工作但很感激评论，特别是在更好的设计方面!!

<body ng-controller="MyCtrl">
 <div><pre>State is on =  {{isOn}}</pre></div>
 <div>
    <input type="checkbox" ng-model="isOn" />Switch the light
       <a toggle="isOn">
          <img ng-src="{{ getToggledUrl() }}">
       </a>
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>

<script>
     angular.module('app', [])
        .directive('toggle', function() {
            return {
                scope: {
                    toggle: "="
                },
                link: function($scope, element, attrs) {

                    element.click(function() {
                        $scope.$apply(function() {
                            var src = element.find('img').attr('src');
                            $scope.toggle = !$scope.toggle

                        })
                    })
                }
            }
        })

     function MyCtrl($scope) {
          $scope.isOn = false;
          $scope.onUrl = "http://www.w3schools.com/js/pic_bulbon.gif";
          $scope.offUrl = "http://www.w3schools.com/js/pic_bulboff.gif";
         //toggle image
          $scope.getToggledUrl = function() {
             return $scope.isOn ? $scope.onUrl : $scope.offUrl;
    };
}

Answer 1

对于简单的图像切换，您可以更轻松地使用隐藏/显示样式：

<input type="checkbox" ng-model="isOn" />Switch the light
<img ng-show="isOn" ng-src="{{ onUrl }}">
<img ng-hide="isOn" ng-src="{{ offUrl }}">

如果您要为此编写指令，则可以将上述内容用作模板，并将onUrl和offUrl作为参数提供给它。如果控件位于指令之外，您还可以提供isOn。

希望这有帮助！

Answer 2

我已经让一个傻瓜展示了我将如何去做。我不知道你是否需要在指令本身之外的指令状态的值，所以我有2个版本，一个从控制器范围获取开/关值并与之一起玩，另一个在内部具有所有逻辑它的。

两个指令的“接口”如下：

<my-toggle value="isOn" on-url="http://www.w3schools.com/js/pic_bulbon.gif" off-url="http://www.w3schools.com/js/pic_bulboff.gif"></my-toggle>


<my-toggle-internal message="toggle me too" on-url="http://www.w3schools.com/js/pic_bulbon.gif" off-url="http://www.w3schools.com/js/pic_bulboff.gif"></my-toggle>

以下是plunker http://plnkr.co/edit/1cdHuy

由于我不知道你的想法，理想的解决方案是我不会深入了解实施细节，直到你指出正确的方向，所以我不解释你已经知道的事情。随便问一下。

Angular指令：Toggable图像作为隔离范围

2 个答案: