Question

我正在尝试创建一个按钮，每次单击时都会更改其样式。

控制台一直出错 - 未定义“初始”。我一直试图找出原因，但到目前为止还没有运气。

这是从视图接收值的错误方法吗？

此外，我在链接功能中创建了一个click事件，但它似乎甚至没有工作。

如果你能帮助我理解如何制定有效的角度指令，那将是很棒的！谢谢！

HTML

<div button-ok initial="glyphicon-plus" after="glyphicon-ok" base="glyphicon"></div>

我做了一个名为“button-ok”的指令

  myapp

      .run(function($templateCache) {
         var button;

         button = "<div class='btn btn-default'></div>";
         $templateCache.put('okbutton.html', button);
      })

      .directive('buttonOk', function($templateCache) {
          var icon;

          icon = angular.element("<i></i>");

          return {
               restrict: 'EA',
               scope: {
                   initial: "@",
                   after  : "@",
                   base   : "@"
               },
               replace : true,
               template: $templateCache.get('okbutton.html'),
               compile: function(tElem) {

                    icon.addClass(base);           
                    icon.addClass(initial);

                    tElem.append(icon);

               },
               link: function(scope, elem) {

                  elem.click(function() {
                     if(icon.hasClass(initial)){
                         icon.removeClass(initial);
                         icon.addClass(after);
                     }else{
                         icon.removeClass(after);
                         icon.addClass(initial);                       
                     }
                  }); 
               }
            };
         });
     });

Answer 1

initial位于范围内，因此需要使用scope.initial（与base和after相同）进行访问。这也意味着您无法在compile()函数中访问它，并且其中的代码需要移至link()。

指令 - 从视图中获取值-scope＆＃34; @＆＃34;

1 个答案: