Question

我正在创建一个非常简单的自定义指令，并尝试使用'＆lt;'将一个简单的字符串变量从父作用域传递到自定义指令隔离作用域符号。然后，我尝试在我的自定义指令控制器中为变量分配一个新值，并在模板中显示新值，但它仍然显示旧值。

这是我的父控制器：

    (function(){
      angular.module("app").controller("ctrl", ctrl);

      function ctrl(){
        ctrl = this;
        ctrl.fullname = "Paul G.";
      }
    })()

这是我的自定义指令：

    (function () {
      'use strict';
      angular.module('app').directive('dir', dir);
      function dir() {
        return {
          scope:{
            name:'<',
          },
          bindToController: true,
          template: `<h1>I'm a directive</h1>
                    <h1>Name: {{vm.name}}</h1>`
          ,
          controller: function($scope){
            this.name = "Tony J";
          },
          controllerAs:'vm'
      };
     }
   })();

这是我的Html：

    <!DOCTYPE html>
        <html ng-app="app">

        <head>
         <meta charset="utf-8" />
         <script        
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js" data-semver="1.5.11"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.6.4/angular-resource.js"></script> 
    <script src="app.js"></script>
    <script src="ctrl.js"></script>
    <script src="directive.js"></script>
  </head>

  <body ng-controller="ctrl as $ctrl">
    <p>Hello {{$ctrl.fullname}}!</p>
    <dir name="$ctrl.fullname"></dir>
    </div>
  </body> 

</html>

输出如下：

但是，我希望它在输出中看到Name：Tony J.

Answer 1

首先提及警告

输入应使用<和@绑定。 <符号表示从1.5开始可用的单向绑定。与=的区别在于未监视组件范围中的绑定属性，这意味着如果为组件范围中的属性分配新值，则不会更新父范围。但请注意，父组件和组件范围都引用相同的对象，因此，如果要更改组件中的对象属性或数组元素，则父级仍将反映该更改。因此，一般规则应该是永远不要更改组件范围中的对象或数组属性。当输入是字符串时，可以使用@绑定，特别是当绑定的值没有改变时。

— AngularJS Developer Guide - Component-based Application Architecture

现在你可以做的是在指令初始化之后更改变量的值（你可以研究AngularJS组件生命周期here）。

controller: function($scope) {
    ctrl = this;
  ctrl.$onInit = function() {
    ctrl.name = "some name"
  }
},

here是我根据你给出的例子开发的一个工作小提琴。

Answer 2

我不知道<（单向数据绑定）作为指令的scope属性的选项，这适用于属性bindings中的组件。

如果要在隔离指令范围内进行单向数据绑定，则可以使用@符号。

无法为AngularJS自定义指令隔离范围属性设置新值

2 个答案: