AngularJS自定义生成的指令动态属性绑定

时间:2017-08-14 06:46:06

标签: javascript jquery html angularjs

在我的场景中,我有一个指令,它将另一个指令标记作为作用域参数。然后第一个指令需要生成新指令并将其附加到其中。它还需要将动态双向绑定属性添加到新生成的指令中。

我能够生成新的指令标记,但是当我尝试添加指令属性时,它会将其附加为字符串(值或简单字符串)。 因此,当我尝试在new指令中访问属性作为范围变量时,它会给我'undefined'。

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

1 个答案:

答案 0 :(得分:1)

你的plunker使用的是角度1.0.2,它不支持bindToController,更改为1.3将使其像你的问题中描述的那样用作字符串绑定。

要将requestId用作双向绑定,您需要将字符串requestId传递给attr。

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

Working plunker