Как переименовать ngModel в директиве AngularJS «требует»

Question

У меня есть эта простой AngularJS директива:

<my-directive ng-model="name"></my-directive> 

, где я хотел бы изменить «нг-модель» атрибут «модель» ... но я бит, потерянный в том, как передать его в опцию «require» в директиве. Вот директива полный код:

myApp.directive('myDirective', function($timeout) { 
    return { 
     restrict: 'E', 
     require: 'ngModel', 
     link: function(scope, element, attrs, ngModel) { 
      ngModel.$render = function() { 
       $timeout(function() { 
        ngModel.$setViewValue('StackOverflow'); 
       }, 5000);     
      }; 
     } 
    }; 
}); 

и здесь скрипку, чтобы играть с: https://jsfiddle.net/cg2enqj2/1/

может кто-то пожалуйста, помогите мне понять, как (и если) это может быть возможно?

большое спасибо!

Answer 1

Итак, вы хотите, чтобы ваша директива обновляла родительский контроллер? Для этого вам не нужно ngModel. Контроллер предназначен для хранения значений, отображаемых в переднем конце, и содержит операции для их получения и установки. Если вы хотите, чтобы директива обновляла родительский элемент, вы должны сделать это, используя службу/фабрику.

Однако, чем может быть немного больше, предназначен для простого перемещения нескольких значений между элементами экрана. Я предпочитаю, чтобы моя область была доступна из директив, обычно просто для чтения значений, а затем контроллер также обрабатывал обновление, но вызывал его из директивы. Это может быть смертным грехом в Угловом мире, но он работает для меня.

В этом примере я удалил ngModel из вашей директивы и добавил кнопку, которая вызывает обновление с кнопки, которую я добавил к шаблону директивы.

https://jsfiddle.net/jimmeyotoole/13kfdq8x/1/

var myApp = angular.module('myApp', []); 

myApp.directive('myDirective', function($timeout) { 
    return { 
    replace: true, 
    template : '<div><p> directive value = {{name}}</p> <button ng-click="activate()">Activate!</button><p>example private {{privatevar}}</p>', 
    link: function(scope) { 
     scope.privatevar="ZZZZ"; 
    } 
    } 
    }); 

myApp.controller('MyCtrl', function($scope, $timeout) { 
    $scope.name = 'Superman'; 
    $scope.activate = function() { 
    $scope.name = "I'm no Superman"; 
    }; 
}); 

Answer 2

Это типичный XY problem. Вам вообще не нужен ngModel, поэтому ваш вопрос неверен. Вы в основном спрашиваете о неправильном.

Что вы хотите сделать, это установить связь между внешней областью и директивой с использованием атрибутов директивы. Это полностью выполнимо, но вместо того, чтобы использовать ngModel, вы можете просто использовать scope атрибут объекта конфигурации директивы:

scope: { 
    model: '=' 
} 

, а затем в функции, связывающей директивы:

$timeout(function() { 
    scope.model = 'lol'; 
}, 1000); 

Результат заключается в следующем: https://jsfiddle.net/s2f5jbrd/1/

Кроме того, при обновлении до AngularJS 1.5 синтаксис становится еще более чистым благодаря функции .component. После применения всех хороших практик (компонент, привязки, контроллер, контроллер как) вот результат: https://jsfiddle.net/s2f5jbrd/4/

Answer 3

После небольшого исследования я нашел способ получить контроллер ngModel дочернего элемента моей директивы. Вот еще одна директива, как пример, в котором модель имеет нестандартную «нг-модель» имя, но только «модель»: https://plnkr.co/edit/UgeYT6tbVpMal7KbPNDC?p=preview

function lgDate($compile, $filter) { 
     var directive = { 
      restrict: 'E', 
      scope: { 
       model: "=", 
      }, 
      compile: compile 
     }; 

     return directive; 

     function compile(element, attrs) { 
      return { 
       pre: function (scope, element, attrs) { 
        var template = '<input ng-model="model" ng-keyup="keyup($event.keyCode)" ui-mask="99/99/9999" ' + 
            'ng-pattern="/(\\d{4}(?!\\d))?([2-9]\\d{3}|1[8-9]\\d{2}|17[6-9]\\d|175[3-9])/" type="text" '; 

        if (element.attr('class')) { 
         template += 'class="' + attrs.class + '" '; 
         element.removeClass(attrs.class); 
        } 

        if (element.attr('name')) { 
         template += 'name="' + attrs.name + '" '; 
         element.removeAttr('name'); 
        } 

        if (element.attr('required')) { 
         template += 'required '; 
         element.removeAttr('required'); 
        } 

        template += '/>'; 

        element.html(template); 
        element.removeClass(attrs.class); 

        $compile(element.contents())(scope); 
       }, 
       post: function (scope, element, attrs) { 
        var ctrl = element.find('input').controller('ngModel'); 

        ctrl.$formatters.push(function (data) { // model - view 
         data = $filter('date')(data, 'ddMMyyyy'); 
         return data; 
        }); 

        ctrl.$parsers.push(function (data) { // view - model 
         var year = data.substr(-4); 
         var month = data.substr(2, 2); 
         var day = data.substr(0, 2); 

         data = (year && month && day) ? year + '-' + month + '-' + day + 'T00:00:00.000Z' : ''; 
         return data; 
        }); 

        scope.keyup = function (key) { 
         if (key === 68) { // D key 
          scope.model = new Date().toJSON(); 
         } 
        }; 
       } 
      } 
     } 
    }