Директива с изолированным объемом и ng-моделью
Я пытаюсь написать директиву, которая использует изолированную область действия и директиву ngModel.
Проблема:
Когда модель обновляется в директиве, значение вызывающего абонента не обновляется.
HTML:
<test-ng-model ng-model="model" name="myel"></test-ng-model>
Директива
app.directive(
'testNgModel', [
'$timeout',
'$log',
function ($timeout, $log) {
function link($scope, $element, attrs, ctrl) {
var counter1 = 0, counter2 = 0;
ctrl.$render = function () {
$element.find('.result').text(JSON.stringify(ctrl.$viewValue))
}
$element.find('.one').click(function () {
if ($scope.$$phase) return;
$scope.$apply(function () {
var form = angular.isObject(ctrl.$viewValue) ? ctrl.$viewValue : {};
form.counter1 = ++counter1;
ctrl.$setViewValue(form);
});
});
$element.find('.two').click(function () {
if ($scope.$$phase) return;
$scope.$apply(function () {
var form = angular.isObject(ctrl.$viewValue) ? ctrl.$viewValue : {};
form.counter2 = ++counter2;
ctrl.$setViewValue(form);
});
});
$scope.$watch(attrs.ngModel, function (current, old) {
ctrl.$render()
}, true)
}
return {
require: 'ngModel',
restrict: 'E',
link: link,
//if isolated scope is not set it is working fine
scope: true,
template: '<div><input type="button" class="one" value="One"/><input type="button" class="two" value="Two"/><span class="result"></span></div>',
replace: true
};
}]);
Демо: Fiddle
Если изолированная область не установлена, она работает нормально: fiddle
Ответы
Ответ 1
Как указано в комментариях, обычно не рекомендуется использовать дочернюю область (scope: true
или scope: { ... }
) с ng-моделью. Однако, поскольку Arun необходимо создать дополнительные свойства области, scope: true
можно использовать с объектом, а не с примитивом. Это использует прототипическое наследование, поэтому $parent
не используется:
<test-ng-model ng-model="someObj.model" ...>
fiddle
Ответ 2
Поскольку вы создали изолированную область видимости, ngModel = "model" относится к вашей новой изолированной области. Если вы хотите обратиться к области AppController, вы должны использовать $parent:
<test-ng-model ng-model="$parent.model" name="myel"></test-ng-model>