web-dev-qa-db-fra.com

Directive avec portée isolée et modèle NG

J'essaie d'écrire une directive qui utilise une portée isolée et une directive Ngmodel.

Problème:
[.____] Lorsque le modèle est mis à jour dans la directive, la valeur de l'appelant n'est pas mise à jour.

HTML:

<test-ng-model ng-model="model" name="myel"></test-ng-model>

Directif:

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
    };

}]);

Démo: violon

Si la portée isolée n'est pas définie, cela fonctionne bien: violon

angularjsangularjs-directiveangularjs-scope
25
Arun P Johny

Comme indiqué dans les commentaires, il n'est généralement pas recommandé d'utiliser une portée de l'enfant (scope: true ou scope: { ... }) avec le modèle NG. Cependant, étant donné que Arun doit créer des propriétés d'une portée supplémentaires, scope: true peut être utilisé avec un objet, pas une primitive. Cela exploite le héritage prototypique, alors $parent n'est pas need:

<test-ng-model ng-model="someObj.model" ...>

fiddle

13
Mark Rajcok

Parce que vous avez créé une portée isolée, ngmodel = "modèle" fait référence à votre nouvelle portée isolée. Si vous souhaitez vous référer à votre application AppController, vous devez utiliser $ parent:

<test-ng-model ng-model="$parent.model" name="myel"></test-ng-model>
7
Wagner Francisco