Question

我的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。

Answer 1

我看到几个错误，指令过于复杂。除了上述所有评论之外，这是错误的：

   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');

查看此codepen：https://docs.angularjs.org/guide/component 这应该会帮助你。

Answer 2

几个错误

指令名称应为cammelCase。
属性应foo-attr而不是fooAttr
如果你有@（单向绑定），你应该使用foo-attr="{{fooData}}"

Answer 3

更改

<div ng-anController="anController">

到

<div ng-controller="anController">

并尝试遵循更好的命名对话，例如app名称不应具有directive后缀，而directive名称也应该在camelcase中，如@pankajParkar所述。< / p>

Answer 4

ng-anController="anController"，似乎应该是ng-controller="anController"。
您应该看scope.fooAttr而不是scope.fooData。

数据未显示在created指令中

4 个答案: