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

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

我在指令中遇到了一个问题。我认为我没有正确理解范围

我有一个指令如下所示：

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;
        }
    }
})

<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>

还有一个HTML模板，如下所示：

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;
        }
    }
})

<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>

{{value}}//指令的这一部分始终保持可见
//该行需要响应单击


拯救
取消

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

---

有人能解释一下我做错了什么吗？

模板应该是

<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>

---

演示：

第一行{{value}我需要始终可见，当我单击指令的可见部分时，指令的其余部分需要隐藏或显示。。当我用view代替{{view}}时，仍然没有发生任何事情。@ng jslearningcurve您也可以不用click处理程序来完成它-您可以使用像Thank you Some这样的指令。。我需要使用click处理程序，因为其中有更多的内容，但我非常欣赏这两个示例。你能再解释一下$$phase和$root.$$phase吗。我摆弄了$scope。$apply，但它处于摆弄的级别。@ng jslearningcurve然后在对摘要周期中评估的范围状态进行更改时，尝试使用类似@ng jslearningcurve的单击处理程序。。。如果ngjs调用了一个方法，那么在方法调用结束时，它将调用摘要周期。。。但是在您的情况下，单击处理程序由jQuery调用，因此ng不知道对作用域所做的任何更改，因此您的ui不会根据新的作用域更改进行更新。。。当您调用

$apply（）

时，它将在内部调用摘要循环，从而更新ui