AngularJS指令更改修改范围变量的能力

时间:2016-06-13 07:28:41

标签: javascript html angularjs

以下是我的问题:http://plnkr.co/edit/Sx830ekQyP7YBqmRB4Nd?p=preview

单击“打开”,然后单击“5”。注意它是如何变成“测试”的?现在,在Body中键入内容。它要么说“多说一点......”或“现在为标题”。无论哪种方式,再次单击该按钮,并注意它是如何不更改为“测试”?为什么不?如果我删除该指令,该按钮将变为“test”,无论是否有正文中的文本。

我知道这与指令中的范围有关,但我不明白到底出了什么问题。你可以解释吗?感谢。

angular.module('plunker', ['ngDialog']).controller('MainCtrl', function($scope, ngDialog) {
//$scope.submitPostValue = "OK";

$scope.submitPost = function() {
  $scope.submitPostValue = 'test';
};

$scope.open = function () {
console.log('open');
    $scope.submitPostValue = '5';
            ngDialog.openConfirm({
            template: 'postModal',
            showClose: true,
            trapFocus: false,
            scope: $scope,
        }).then(function (success) {
        }, function (error) {

        });
};
 }).directive('bodyValidator', function () {
return {
    require: 'ngModel',
    link: function (scope, element, attr, ctrl) {
        function customValidator(ngModelValue) {
            if(ngModelValue.length > 0){
                if(ngModelValue.length < 10) {
                    scope.submitPostValue = "Say a little more...";
                    scope.bodyValid = false;
                }
                else {
                    scope.bodyValid = true;
                    if(scope.titleValid)
                        scope.submitPostValue = "Submit";
                    else
                        scope.submitPostValue = "Now for the title..."
                   }
                }
                else {
                scope.submitPostValue = "Enter a body...";
                scope.bodyValid = false;
            } 

            return ngModelValue;
        }
        ctrl.$parsers.push(customValidator);
    }
};
});

1 个答案:

答案 0 :(得分:1)

尝试将所有变量包装到对象中。

首先定义$scope.obj = {};并将所有scope.submitPostValue更改为$scope.obj.submitPostValue。在您的HTML中,将ng-value='submitPostValue'更改为ng-value=obj.submitPostValue