小编red*_*ose的帖子

为ui-bootstrap工具提示/弹出窗口动态设置attrs

我正在尝试以编程方式切换工具提示(如此处提到的:https://stackoverflow.com/a/23377441)并使其完全正常运行,除了一个问题.为了使它工作,我必须具有硬编码的工具提示触发器和工具提示属性,如下所示:

<input type="text" tooltip-trigger="show" tooltip="" field1>
Run Code Online (Sandbox Code Playgroud)

在我的工作指令中,我能够更改工具提示属性并触发工具提示,但是如果我尝试将这两个属性保留并尝试动态设置它们,则ui-bootstrap不会提取它们并且不会显示工具提示.

HTML

<input type="text" field2>
Run Code Online (Sandbox Code Playgroud)

JS

myApp.directive('field2', function($timeout) {
    return {
        scope: true,
        restrict: 'A',
        link: function(scope, element, attrs) {

            scope.$watch('errors', function() {
                var id = "field2";
                if (scope.errors[id]) {
                    $timeout(function(){
                      // these attrs dont take effect...
                        attrs.$set('tooltip-trigger', 'show');
                        attrs.$set('tooltip-placement', 'top');

                        attrs.$set('tooltip', scope.errors[id]);
                        element.triggerHandler('show');
                    });
                    element.bind("click", function(e){
                      element.triggerHandler('hide');
                    });
                }
            });
        },
    };
});
Run Code Online (Sandbox Code Playgroud)

我不想在html中对这些属性进行硬编码,那么我该如何动态设置这些属性并获取ui-bootstrap来获取它们呢?

这是一个具有工作(field1)和非工作(field2)指令的plunker:http://plnkr.co/edit/mP0JD8KHt4ZR3n0vF46e

angularjs angular-ui-bootstrap

3
推荐指数
1
解决办法
5777
查看次数

标签 统计

angular-ui-bootstrap ×1

angularjs ×1