AngularJs指令添加屬性，該事件不會被觸發

我有點停留在這個指令，我要的是收到一個JSON字符串從GetProperties中發揮作用，如：

{"class":"someclass","ng-change":"someChange()",ng-click": "someCLick()"}

該指令將創建JSON中的所有屬性（它的工作原理），問題是ng- *根本無法工作....任何想法？

HTML：

<div ng-repeat="field in fields"> 
    <input type="text" ng-model="ngModel[field.fieldName]" ng-switch="text" property="{{formParams.getProperties(field.fieldName)}}" update-attr /> 
</div>

這是指令：

.directive('updateAttr', function() { 
     return { 
      restrict: 'A', 
      replace: true, 
      scope:{ 
       test:'&' 
      }, 
      terminate:true, 

      link: function (scope, elem, attrs) { 
       if (angular.isDefined(attrs['property']) || attrs['property'].lenght != 0) { 
        var json = JSON.parse(attrs['property']); 
        elem.removeAttr('property'); 
        angular.forEach(json, function (value, key) { 
          elem.attr(key, value); 
        }); 
       } 
      }, 
     }; 
    })

這裏有一個的jsfiddle：http://jsfiddle.net/nyyfmd0e/16/

來源

2014-10-05 Aliceiw

檢查的for-each 'angular.forEach（JSON，函數（值，鍵）{ 的console.log（「ADD」 +鍵）; elem.attr（鍵，值）; }）;' 您將「something1」作爲關鍵字添加了給定值 - 該如何工作？ – graphefruit 2014-10-05 09:09:15

我不明白你想要達到什麼，你能否詳細說明一下？目前你的ngModel引用一個空的對象是可取的嗎？ – Linial 2014-10-05 10:36:12

@Linial這個腳本是更大的東西的一部分，所以我不得不提取指令並創建一個工作示例^^，如果你看看js小提琴，你可以看到指令正確地創建了新的屬性....但在ng-change中，函數test（）不會在指令或控制器中調用.... – Aliceiw 2014-10-05 10:59:12

的問題是，你的link功能中加入ng-change屬性，後指令已編譯，因此Angular不知道它的存在。在添加新屬性後，您需要重新編譯並替換該指令的元素。

嘗試用下面的代碼替換您的指令。

.directive('updateAttr', function ($compile) { 
    return { 
     restrict: 'A', 
     replace: true, 
     terminate: true, 
     link: function (scope, elem, attrs) { 
      if (angular.isDefined(attrs['property']) && attrs['property'].lenght != 0) { 
       var json = JSON.parse(attrs['property']); 
       angular.forEach(json, function (value, key) { 
        elem.attr(key, value); 
       }); 
       elem.removeAttr('property'); 
       var $e = $compile(elem[0].outerHTML)(scope); // <-- recompile 
       elem.replaceWith($e); // <-- replace with new compiled element 
      } 
     }, 
     controller:function($scope){ 
      $scope.test=function(){ 
       console.log('me either'); 
      }     
     } 
    }; 
});

在這種情況下，test()功能的指令控制器將被調用。如果您刪除了指令控制器，則將調用您的應用程序的控制器（在您的小提琴中調用testController）。

這裏有一個工作小提琴供您參考http://jsfiddle.net/JohnnyEstilles/3oaha6z4/。

來源

2014-10-05 14:32:51 JME

AngularJs指令添加屬性，該事件不會被觸發

回答

相關問題