Мой HTML выглядит так:

<body ng-app="customDirective">
<div ng-controller="anController">
Date format: <input ng-model="fooData"> <hr/>
Current time is: <my-new-directive foo-Attr="{{fooData}}"></my-new-directive>
</div>
</body>
</html>

Я хотел бы обновить данные внутри моего созданного тега my-new-directive, если свойство области scope.fooData изменено.

Итак, у меня есть свойство области видимости fooData:

$scope.fooData = 'Hello World!:)';

И я создаю директиву:

(function(angular) {
  'use strict';
angular.module('customDirective', [])
  .controller('anController', ['$scope', function($scope) {
    $scope.fooData = 'Hello World!:)';
  }])
  .directive('myNewDirective', [function() {

    function link(scope, element, attrs) {
      var format,
          timeoutId;

      function updateValue() {
        element.text(format);
      }

      scope.$watch(scope.fooData, function(value) {
        format = value;
        updateValue();
      });
    }

    return {
      restrict: 'A',
      link: link,
      scope: {
         fooAttr: '@' 
      }
    };
  }]);
  document.createElement('my-new-directive');
})(window.angular);    

Но если я напишу новые значения внутри входного тега, то в моей новой директиве ничего не произойдет.

Любая помощь будет принята с благодарностью! Я использую AngularJS 1.5.8.

1
StepUp 9 Янв 2017 в 18:52

3 ответа

Лучший ответ

Я вижу несколько ошибок, и директива слишком сложна. Вдобавок ко всем комментариям выше, это неправильно:

   return {
      restrict: 'A',
      link: link,
      scope: {
         fooAttr: '@' 
      }
    };

Вы ограничиваете действие директивы при добавлении в качестве атрибута. Однако в вашем примере кода:

Current time is: <my-new-directive foo-Attr="{{fooData}}"></my-new-directive>

Вы используете это как элемент.

Измените свою директиву следующим образом:

   return {
      restrict: 'AE', // allow it as element or attribute
      link: link,
      scope: {
         fooAttr: '@' 
      }
    };

Или

   return {
      restrict: 'E',  // only element
      link: link,
      scope: {
         fooAttr: '@' 
      }
    };

Также удалите это:

  document.createElement('my-new-directive');

Проверьте этот код: http://codepen.io/anon/pen/QdjBZr Это должно помочь вам.

1
Roy Milder 9 Янв 2017 в 19:52

+ Изменить

<div ng-anController="anController">

Кому

<div ng-controller="anController">

И попробуйте следовать более хорошему соглашению об именах, например, app имя не должно иметь суффикс directive, а имя directive также должно быть в camelcase, как упоминалось в @pankajParkar.

0
clurect 9 Янв 2017 в 17:55
  1. ng-anController="anController", похоже, это должно быть ng-controller="anController".

  2. Вы должны смотреть scope.fooAttr вместо scope.fooData.

0
J ZHOU 9 Янв 2017 в 15:57