为什么我的角度指令不起作用?

时间:2016-06-03 12:20:09

标签: angularjs angularjs-directive angular-ui-bootstrap

我有一个单击按钮时触发的指令。指令中的函数只需要更改字段的属性值。所以我尝试做的是从'popover-trigger =“blur”'改为'popover-trigger =“none”'。

这是我的傻瓜:http://plnkr.co/edit/L81fQgi7j1dEtf1QAZJ2?p=preview

或代码在这里:

var app = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
app.controller('PopoverDemoCtrl', function ($scope) {
    $scope.dynamicPopover = {
        content: 'Hello, World!',
        templateUrl: 'myPopoverTemplate.html',
        title: 'Title'
    };
    $scope.label = "Please click";
    $scope.message = "ON FOCUS trigger a tooltip";

    $scope.htmlPopover = "myPopoverTemplate.html";
});

app.directive("changeTrigger", function($compile){
    return{
        restrict: 'A',
        link: function(scope, elm, attrs)
        {
            elm.bind('click', function(){
                var t = document.getElementsByClassName('f')[0].setAttribute('popover-trigger', 'none');

            $compile(t);
            console.log("Click works");
        });
    }
}

});

HTML

<div ng-controller="PopoverDemoCtrl">
    <br><br><br>
    <p>{{message}}</p>
    <input class="f" type="text" value="Click me!" uib-popover-template="htmlPopover" popover-trigger="focus" popover-popup-close-delay="1000" popover-placement="right" required>

    <test-directive></test-directive>

    <script type="text/ng-template" id="myPopoverTemplate.html">
        <div>
            <p>Click the button to stop triggering tooltip!</p>
            <button change-trigger><b style="color: red">Stop tooltip</b></button>
            <div class="label label-success">page</div>
        </div>
    </script>
</div>

1 个答案:

答案 0 :(得分:3)

您无法通过更改uib-popup-*参数来重新配置angular-bootstrap Popup元素;但您可以将范围变量绑定到popup-enable属性,以便能够打开/关闭弹出窗口。添加:

<input ... uib-popover-template="htmlPopover" popover-enable="enable" ...>

$scope.enable = true;

这里的问题是你的按钮和输入框有不同的范围。但是你可以通过检索字段的范围来解决这个问题:

var t = document.getElementsByClassName('f')[0];
var scope_ = angular.element(t).scope();

当然,您需要使用$scope.$apply来使范围正确处理双向数据绑定:

scope_.$apply(function () {
    scope_.enable = false;
});

Working Plunkr.