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>

我的控制台日志显示，范围值正在触发click事件，但是＆＃34; view＆＃34;没有应用于需要显示和隐藏的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

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

1 个答案: