31

我正在编写一个需要隔离范围的指令，但我想通过ngModel将它绑定到父范围。

这里的问题是父级的范围值没有改变。

标记

<form name="myForm" ng-app="customControl">
    <div ng-init="form.userContent"></div>
    <div contenteditable name="myWidget" ng-model="form.userContent" required>Change me!</div>
    <span ng-show="myForm.myWidget.$error.required">Required!</span>
    <hr />
    <textarea ng-model="form.userContent"></textarea>
</form>

JS

angular.module('customControl', []).directive('contenteditable', function() {
    return {
        restrict : 'A', // only activate on element attribute
        require : '?ngModel', // get a hold of NgModelController
        scope: {},
        link : function(scope, element, attrs, ngModel) {
            if (!ngModel)
                return; // do nothing if no ng-model

            // Specify how UI should be updated
            ngModel.$render = function() {
                element.html(ngModel.$viewValue || '');
            };

            // Listen for change events to enable binding
            element.bind('blur keyup change', function() {
                        scope.$apply(read);
                    });
            read(); // initialize

            // Write data to the model
            function read() {
                ngModel.$setViewValue(element.html());
            }
        }
    };
});

演示：小提琴。

如果我不为指令使用隔离范围，这很好用

演示：小提琴。

4

3 回答 3

45

原因是由于您为contenteditable指令创建了一个隔离范围，ng-model同一元素上的指令也获得了该隔离范围。这意味着您有两个不相互连接的不同范围，它们都有一个form.userContent单独更改的属性。我想您可以通过以下代码来举例说明：

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
    <script>
    angular.module('myApp', []).controller('Ctrl', function($scope) {

    })
    .directive('contenteditable', function() {
        return {
            restrict : 'A', // only activate on element attribute
            require : '?ngModel', // get a hold of NgModelController
            scope: {},
            link : function(scope, element, attrs, ngModel) {
                if (!ngModel)
                    return; // do nothing if no ng-model

                setInterval(function() {
                    if (angular.element('#contenteditable').scope().form)
                        console.log(angular.element('#contenteditable').scope().form.userContent);

                    if (angular.element('#textarea').scope().form)
                        console.log(angular.element('#textarea').scope().form.userContent);
                }, 1000);

                // Specify how UI should be updated
                ngModel.$render = function() {
                    element.html(ngModel.$viewValue || '');
                };

                // Listen for change events to enable binding
                element.bind('blur keyup change', function() {
                            scope.$apply(read);
                        });
                read(); // initialize

                // Write data to the model
                function read() {
                    ngModel.$setViewValue(element.html());
                }
            }
        };
    });
    </script>
</head>
<body ng-controller="Ctrl">
    <form name="myForm">
        <div ng-init="form.userContent"></div>
        <div contenteditable name="myWidget" ng-model="form.userContent" id="contenteditable" required>Change me!</div>
        <span ng-show="myForm.myWidget.$error.required">Required!</span>
        <hr />
        <textarea ng-model="form.userContent" id="textarea"></textarea>
    </form>
</body>
</html>

正如您将在控制台中看到的那样，有两个不同的范围，form.userContent如果您更改 textarea 中的文本或更改 contenteditable div 中的文本，它们会分别更改。

所以我敢打赌你在想“解释够了，给我一个解决方案！”。好吧，（据我所知）没有一个很好的解决方案，但是有一个有效的解决方案。您要做的是将模型的引用带入您的隔离范围，并确保它在您的隔离范围中与父范围中的名称相同。

这是您所做的，而不是像这样创建一个空范围：

...
scope: {}
...

你像这样绑定模型：

...
scope: {
    model: '=ngModel'
}
....

现在，您model在隔离范围上有一个属性，它是form.userContent对父范围的引用。但ng-model不是在寻找model属性，而是在寻找form.userProperty在我们的孤立范围内仍然不存在的属性。所以为了解决这个问题，我们在链接函数中添加了这个：

scope.$watch('model', function() {
    scope.$eval(attrs.ngModel + ' = model');
});

scope.$watch(attrs.ngModel, function(val) {
    scope.model = val;
});

第一个监视form.userContent将来自我们指令之外的更改同步到我们的 isolated form.userContent，第二个监视确保我们将隔离form.userContent的任何更改传播到父范围。

我意识到这是一个冗长的答案，也许不太容易理解。因此，我很乐意澄清您认为模糊的任何内容。

于 2013-03-07T13:22:38.147 回答
4

第一个答案很好地解释了这个问题，我相信我有一个更简单的解决方案，可以避免额外的手表。

总结答案 1. ngModel 无法在隔离范围内工作，因为您希望它绑定的元素不在其范围内。它们在父范围内。

解决方案1，绑定到父级的属性

<div contenteditable name="myWidget" ng-model="form.userContent" required>Change me!</div>

变成

<div contenteditable name="myWidget" ng-model="$parent.form.userContent" required>Change me!</div>

解决方案2，将ngModel移到隔离范围之外

require : '?ngModel',变成require : '?^ngModel',^ 告诉你的指令在父元素中查找 ngModel

<div contenteditable name="myWidget" ng-model="form.userContent" required>Change me!</div>

变成

<div ng-model="form.userContent">
    <div contenteditable name="myWidget" required>Change me!</div>
</div>
于 2015-09-03T03:49:16.760 回答
-1

我不确定这是否适合你。不过你可以试一试。

html:

<form name="myForm" ng-app="customControl">
    <div ng-init="form.userContent"></div>
    <div contenteditable name="myWidget" ng-model="form" required>Change me!</div>
    <span ng-show="myForm.myWidget.$error.required">Required!</span>
    <hr />
    <textarea ng-model="form.content"></textarea>
</form>

js

angular.module('customControl', []).directive('contenteditable', function() {
    return {
        restrict : 'A', // only activate on element attribute
        require : '?ngModel', // get a hold of NgModelController
        link : function(scope, element, attrs, ngModel) {
            if (!ngModel)
                return; // do nothing if no ng-model
            // Specify how UI should be updated
            ngModel.$render = function() {
                element.html(ngModel.$viewValue || '');
            };

            // Listen for change events to enable binding
            element.bind('blur keyup change', function() {
                        scope.$apply(read);
                    });
            read(); // initialize

            // Write data to the model
            function read() {
                ngModel.$setViewValue({'content': element.html()});
            }
        }
    };
});
于 2017-10-09T07:32:13.913 回答