ngclass angularjs angularjs-directive angularjs-scope

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" ...>

fiddle


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>