angularjs - ngclass - Directiva con alcance aislado y modelo ng.
ngclass angular 4 (2)
Estoy tratando de escribir una directiva que haga uso del ámbito aislado y la directiva ngModel.
Problema:
Cuando el modelo se actualiza en la directiva, el valor de la persona que llama no se actualiza.
HTML:
<test-ng-model ng-model="model" name="myel"></test-ng-model>
Directiva:
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
};
}]);
Demo: Fiddle
Si el alcance aislado no está configurado, funciona bien: fiddle
Como se discutió en los comentarios, generalmente no se recomienda usar un ámbito secundario ( scope: true
o scope: { ... }
) con ng-model. Sin embargo, dado que Arun necesita crear propiedades de alcance adicionales, scope: true
puede usarse con un objeto, no con un primitivo. Esto aprovecha la herencia prototípica, por lo que $parent
no es necesario:
<test-ng-model ng-model="someObj.model" ...>
Debido a que creó un alcance aislado, ngModel = "modelo" se refiere a su nuevo alcance aislado. Si desea consultar el alcance de su AppController, debe usar $ parent:
<test-ng-model ng-model="$parent.model" name="myel"></test-ng-model>