javascript - 指令 - 从 View 中获取值 -scope "@"

Question

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

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

这是从 View 接收值的错误方式吗？

此外，我在链接函数中创建了一个点击事件，但它似乎根本不起作用。

如果您能帮助我了解如何制定有效的 Angular Directive(指令)，那就太好了!谢谢!

---

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()。