AngularJS自定義生成的指令動態屬性綁定

在我的方案中，我有一個指令，將有另一個指令標記作爲範圍參數。第一條指令然後需要生成新的指令並將其添加到其中。它還需要將動態雙向綁定屬性添加到新生成的指令中。AngularJS自定義生成的指令動態屬性綁定

我能夠生成新的指令標記，但是當我嘗試添加指令屬性時，它將其作爲字符串（值或簡單字符串）追加。因此，當我試圖在新指令中作爲範圍變量訪問屬性時，它給了我'未定義'。

HTML：

<div ng-controller="MainCtrl"> 
=== 
<directive1 tag="obj.tag" request-id="requestId"></directive1> 
</div>

指令：

app.directive('directive1', function($compile) { 
return { 
    restrict: 'E', 
    scope:{ 
     tag:"=", 
     requestId:"=" 
    }, 
    link: function(scope, element, attrs) { 
     var el; 
     scope.$watch('tag', function (tpl) { 
      console.log("8888",tpl); 
      el = $compile(tpl)(scope); 
      el.attr('request-id', scope.requestId); 
      el = $compile(el)(scope); 
      element.append(el); 
     }); 
     // attrs.$set('ngHide', false); 
     // attrs.$set('hide', null); 
     // $compile(element)(scope); 
    } 
}; 
}) 
app.directive('test', function($compile) { 

    return { 
     restrict: 'E', 
     scope:{ 
      requestId:"=" 
     }, 
     controllerAs: 'requestCtrl', 
     bindToController: true, //required in 1.3+ with controllerAs 

     controller:function(){ 
      var requestCtrl=this; 
      console.log("----->>>> ",requestCtrl.requestId) 
     }, 
     link: function(scope, element, attrs) { 
     } 
    }; 
});

控制器：

app.controller('MainCtrl', function($scope) { 
    $scope.obj={}; 
    $scope.obj.tag="<test></test>"; 
    $scope.requestId="123"; 
});

這裏是plunker

來源

2017-08-14 Anita

你plunker使用角1.0 .2它不支持bindToController，但更改爲1.3將使其按您的問題中所述的字符串綁定工作。

要使用requestId作爲雙向綁定，您需要將字符串requestId傳遞給attr。

el.attr('request-id', 'requestId');

Working plunker

來源

2017-08-14 07:49:32 Icycool

AngularJS自定義生成的指令動態屬性綁定

回答

相關問題