Angularjs - 通过单击同一指令中的不同元素来切换指令内的元素可见性

Question

我一直试图弄清楚这一点并进行了一些搜索，但我发现的结果似乎总是解决指令和控制器之间发生的问题。

我在指令中有问题。我认为我没有正确理解范围。

我有一个如下所示的指令：

mb.directive("plainText", function() {
    return {
        restrict: 'E',
        scope: {
            value: "@",
        },
        templateUrl: 'plainText.html',
        link: function(scope, element, attrs){

            scope.view = false;

            element.bind("click", function() {

                if ( scope.view == false ) {
                    scope.view = true;
                    console.log(scope.view);
                } else {
                    scope.view = false;
                    console.log(scope.view);
                }
            })

            scope.value = attrs.value;
        }
    }
})

还有一个这样的 HTML 模板：

<div>{{value}}</div> // this part of the directive always stays visible

<div ng-show="{{view}}"> // THIS LINE NEEDS TO RESPOND TO THE CLICK
    <input type="text" ng-model="value">
    <br/>
    <div class="btn btn-default" ng-click="save()">Save</div>
    <div class="btn btn-default" ng-click="cancel()">Cancel</div>
</div>

我的控制台日志显示单击事件被范围值触发，但“视图”并未应用于需要显示和隐藏的 div。

谁能解释我做错了什么？

Answer 1

模板应该只是

<div ng-show="view">
    <input type="text" ng-model="value">
    <br/>
    <div class="btn btn-default" ng-click="save()">Save</div>
    <div class="btn btn-default" ng-click="cancel()">Cancel</div>
</div>

ng-show 指令监视通过属性传递的作用域变量的变化，因此您需要通过插值传递作用域变量名称而不是变量。

您还需要在 jQuery 点击处理程序中调用 scope.$apply()

        element.bind("click", function () {
            scope.view = !scope.view;
            console.log(scope.view);

            if (!scope.$$phase && !scope.$root.$$phase) {
                scope.$apply()
            }
        })

演示：Fiddle