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

Question

我有一个单击按钮时触发的指令。 指令内部的函数只需更改字段的属性值。 所以我想做的就是将'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>

Answer 1

您不能通过更改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来正确处理双向数据绑定：

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

工作的Plunkr。