碰撞范围

Question

我想在我的指令中设置默认值，但是它将为null

(function(angular) {
  'use strict';
angular.module('docsTransclusionExample', [])
  .controller('Controller', ['$scope', function($scope) {

  }])
  .directive('myDialog', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {
        name: '=?'
      },
      templateUrl: 'my-dialog.html',
      link: function (scope, element) {

      },
      controller: function($scope) {
          $scope.name = 'Tobias';
      }
    };
  });
})(window.angular);

http://plnkr.co/edit/gVLvFwdXp0oxmJUOAMMN

Answer 1

检查演示：http://plnkr.co/edit/Ui9EqKNeUc3K01L1el0d?p=preview

因为当您调用该指令时，您不会传入绑定属性。

将name绑定到指令：

<my-dialog name="name">Check out the contents, {{name}}!</my-dialog>

由于您使用的是transclude: true。 Angular将为（transclude scope）已转换内容创建单独的范围，即Check out the contents, {{name}}!。此范围原型继承自父范围，它是isolated scope的兄弟。所以这里{{name}}没有访问隔离范围上的名称。相反，它正在访问transclude scope（并且上游遍历到其父作用域，您没有设置name）。

使用<my-dialog name="name">...将在父作用域中创建name属性，并two-way绑定到该指令。这样，更改指令内的值也会改变外部的值。

Answer 2

碰撞范围

您遇到了问题，因为您有一个被转换的范围和一个隔离范围冲突。删除scope: { name: '=' }以插入控制器范围上的name。除非您需要保持范围不继承或与父范围冲突，否则通常不需要隔离范围。

如果您需要保持指令范围的隔离，请不要删除上述内容并将name属性添加到元素并将其设置为您要使用的范围属性：name="name"例如。

鉴于以下内容：

scope: {
  name: '='
}

这意味着您对元素上的name 属性中定义的范围属性进行双向绑定，并在上将其命名为 name 隔离范围。如果您说somename: '=thatName'那么您将双重绑定到that-name属性但是将其称为＆＃34; somename＆＃34;在隔离范围上。

在双向绑定中，指令范围的更改将影响父范围。如果您想要单向绑定（更改不会影响父级），您可以使用name: '@'，如果要绑定到name属性的值，可以使用name: '&'。< / p>

指令默认范围值未设置？

2 个答案:

碰撞范围