在隔离范围内观察,双向绑定不起作用

时间:2015-04-22 08:54:14

标签: javascript angularjs

我的主要范围内有一个变量:

scope.trigger

并在我的指令中:

angular.module('modal').directive('nsModal', ['nsTools', function (Tools) {
return {
    restrict: 'E',
    replace: true,
    scope:{
        trigger: "="
    },
    templateUrl: 'common/modal.html',
    controller: ['$scope', function (scope) {

        scope.isShown = false;

        scope.$watch(function () {
            return scope.trigger;
        }, function (n) {
            if (n == 'order-button') {
                scope.isShown = true;

            }
            else {
                scope.isShown = false;
            }
        });
        scope.clickClose = function ()
        {
            scope.currentTrigger = "";
        }
        scope.clickCancel = function ()
        {
            scope.currentTrigger = "";
            scope.isShown = false;
        }

        scope.clickYes = function ()
        {
            scope.currentTrigger = "";
            scope.isShown = false;
        }
    }]
}
}]);

我想更改mainscope触发器参数,因此我进行了双向绑定。但随着它,手表无法正常工作。 手表中的scope.trigger始终未定义;

当我删除scope部分时,手表工作正常,但后续更改未保存在主范围内

HTML: 在我的索引中: <ns-modal /> 和模态代码:

<div ng-show="isShown">
    <div >
    <div class="modal">
        <div class="modalheader>
            <p >Message</p>
            <button ng-click="clickClose()"></button>
        </div>
        <div class="modal-body">
            <span>Identify customer ?</span>
            <div class="modalfooter">
                <button id="cancel" ng-click="clickCancel()">No</button>
                <button id="save" ng-click="clickYes()">Yes</button>
            </div>
        </div>
    </div>
</div>

多数民众赞成

3 个答案:

答案 0 :(得分:3)

在你的html中,应该添加trigger属性:

<ns-modal trigger="trigger"/> 

请注意,触发器可能是任何变量(但您在主范围内写过它被称为触发器)。

这是因为添加时:

scope:{
    trigger: "="
},

创建指令的新范围。因此,您应该使用属性指定传递给指令的每个变量;

答案 1 :(得分:1)

您应该使用深度监视trigger的变量true上的监视。

 scope.$watch('trigger', function (n) {
        if (n == 'order-button') {
            scope.isShown = true;

        }
        else {
            scope.isShown = false;
        }
    }, true);

<强>更新

正如我在评论中所说,html应该有trigger="someVariable"

<强>标记

<ns-modal trigger="someVariable"></ns-modal>

答案 2 :(得分:-1)

首先,你可能想要使用Angular的事件而不是$watch - 因为它要贵得多。 (使用$scope.$broadcast & $scope.$on)。

其次,如果您还可以指定如何使用该指令 - 这将有助于理解该问题。