元素指令中的Angular.JS綁定屬性

Question

我想做的是創建一個元素指令，該指令可以具有可綁定的屬性並且可以使用靜態值。

例如 我有一個指令myTag，它應該支持啟用/禁用某些功能...我希望它能像

<my-tag enable_f1="true" enable_f2="true" />

或喜歡

<my-tag enable_f1="{{mc.someVal1}}" enable_f2="{{mc.someVal2}}" />

現在如何編寫鏈接方法，以支持對屬性和靜態值的綁定？

 angular.module('TestModule',[])
  .directive('myTag',function() {
      return {
          restrict: 'E',
          templateUrl: '<div></div>',
          link: function (scope, element, attrs){
                 //I can get attrs.enable_f1, attrs.enable_f2, but what if it is bound to model? 
          }
      }
  });

Answer 1

您可以使用一個隔離的范圍來獲取這些值：

HTML：

<my-tag enable-f1="mc.someVal1" enable-f2="mc.someVal2"></my-tag>
<my-tag enable-f1="true" enable-f2="false"></my-tag>

指示：

myApp.directive('myTag',function() {
      return {
          restrict: 'E',
          template: '<div></div>',
          scope: {
              enableF1: '=',
              enableF2: '='
          },
          link: function (scope, element, attrs){
                 console.log(scope.enableF1);
                 console.log(scope.enableF2);
          }
      }
  });

小提琴