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

冰凉

您的 plunker 正在使用尚不支持的 angular 1.0.2 bindToController,更改为 1.3 将使其作为您问题中所述的字符串绑定工作。

要将 requestId 用作 2 路绑定,您需要将字符串传递requestId到 attr。

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

工作笨蛋

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

AngularJS自定义指令双向绑定

来自分类Dev

AngularJS动态自定义指令问题

来自分类Dev

angularjs自定义指令重复属性

来自分类Dev

使用指令绑定angularjs中的自定义事件

来自分类Dev

在自定义指令中绑定数据-AngularJS

来自分类Dev

AngularJS自定义指令

来自分类Dev

使用AngularJs动态指令进行自定义视图

来自分类Dev

AngularJS:具有多个模板的动态自定义指令

来自分类Dev

通过属性的angularjs自定义指令条件templateUrl

来自分类Dev

在Angularjs自定义指令中获取属性的值

来自分类Dev

在Angularjs自定义指令中获取属性的值

来自分类Dev

angularjs自定义指令值更改

来自分类Dev

选择的AngularJS自定义指令

来自分类Dev

多个自定义指令angularjs

来自分类Dev

AngularJS:自定义指令内的ngView

来自分类Dev

AngularJs 多个自定义指令失败

来自分类Dev

Angularjs:在模板中绑定时,为什么自定义指令中的参数未定义?

来自分类Dev

AngularJS:无法从自定义指令属性中检索值以在自定义指令中进行解析

来自分类Dev

AngularJS指令将指令添加为属性并动态绑定它们

来自分类Dev

AngularJS:自定义指令中的双向数据绑定不起作用

来自分类Dev

双向绑定隔离范围在自定义指令中不起作用-AngularJS

来自分类Dev

如何在angularjs指令中绑定到自定义事件?

来自分类Dev

Yeoman Mean.js生成的自定义AngularJS指令不起作用

来自分类Dev

如何判断AngularJS中缺少自定义指令属性的时间

来自分类Dev

AngularJS:使用angular属性指令将元素包装到自定义模板中

来自分类Dev

复选框上ng-indeterminate属性的AngularJS自定义指令

来自分类Dev

AngularJS:如何将属性设置为自定义指令

来自分类Dev

如何在angularjs自定义指令的模板中获取属性值?

来自分类Dev

AngularJS-在templateUrl中具有属性的自定义指令

Related 相关文章

  1. 1

    AngularJS自定义指令双向绑定

  2. 2

    AngularJS动态自定义指令问题

  3. 3

    angularjs自定义指令重复属性

  4. 4

    使用指令绑定angularjs中的自定义事件

  5. 5

    在自定义指令中绑定数据-AngularJS

  6. 6

    AngularJS自定义指令

  7. 7

    使用AngularJs动态指令进行自定义视图

  8. 8

    AngularJS:具有多个模板的动态自定义指令

  9. 9

    通过属性的angularjs自定义指令条件templateUrl

  10. 10

    在Angularjs自定义指令中获取属性的值

  11. 11

    在Angularjs自定义指令中获取属性的值

  12. 12

    angularjs自定义指令值更改

  13. 13

    选择的AngularJS自定义指令

  14. 14

    多个自定义指令angularjs

  15. 15

    AngularJS:自定义指令内的ngView

  16. 16

    AngularJs 多个自定义指令失败

  17. 17

    Angularjs:在模板中绑定时,为什么自定义指令中的参数未定义?

  18. 18

    AngularJS:无法从自定义指令属性中检索值以在自定义指令中进行解析

  19. 19

    AngularJS指令将指令添加为属性并动态绑定它们

  20. 20

    AngularJS:自定义指令中的双向数据绑定不起作用

  21. 21

    双向绑定隔离范围在自定义指令中不起作用-AngularJS

  22. 22

    如何在angularjs指令中绑定到自定义事件?

  23. 23

    Yeoman Mean.js生成的自定义AngularJS指令不起作用

  24. 24

    如何判断AngularJS中缺少自定义指令属性的时间

  25. 25

    AngularJS:使用angular属性指令将元素包装到自定义模板中

  26. 26

    复选框上ng-indeterminate属性的AngularJS自定义指令

  27. 27

    AngularJS:如何将属性设置为自定义指令

  28. 28

    如何在angularjs自定义指令的模板中获取属性值?

  29. 29

    AngularJS-在templateUrl中具有属性的自定义指令

热门标签

归档