Aru*_*hny 29 angularjs angularjs-directive angularjs-scope
我正在编写一个需要隔离范围的指令,但我想通过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());
}
}
};
});
演示:小提琴.
如果我不使用指令的隔离范围,这可以正常工作
演示:小提琴.
And*_*ahl 43
原因是,由于您正在为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来自我们指令之外的我们的隔离form.userContent,第二个手表确保我们将隔离的任何更改传播form.userContent到父范围.
我意识到这是一个冗长的答案,也许不是很容易理解.因此,我很乐意清除您认为模糊的任何事情.
| 归档时间： |
|
| 查看次数： |
50499 次 |
| 最近记录： |