Question

请考虑以下事项：

HTML

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
<meta charset=utf-8 />
<title>Exploring directives</title>
</head>
<body> 

  <my-directive>
    Some text
  </my-directive>
  {{Info.Version}}
  <script type="text/ng-template" id='my-directive.html'>
    <div>Hello, {{Info.Version}}</div>
  </script>
</body>
</html>

JS

var app = angular.module('myApp', []);
app.run(function($rootScope) {
  $rootScope.Info = {};
  $rootScope.Info.Name = 'rootScope';
  $rootScope.Info.Version = '1.0.0.1';
});
app.directive('myDirective', function() {
  return {    
    restrict: 'E',
    templateUrl: 'my-directive.html',
    scope: false
  };
});

Batarang

enter image description here

从我所看到的情况来看，$ rootScope永远不会显示（但我猜它会被标记为范围（001），如果是的话）。

当我在 JS ：

中将范围更改为true时

app.directive('myDirective', function() {
  return {    
    restrict: 'E',
    templateUrl: 'my-directive.html',
    scope: true
  };
});

出现将$ rootScope下推到范围（002）：

enter image description here

有人可以解释一下发生了什么吗？为什么$ rootScope似乎被推倒了？那么什么呢？这是jsbin链接：http://jsbin.com/udALigA/1/

Answer 1

通常指令会创建自己的scope（在本例中为Scope (002)），但是当您在scope: true中设置myDirective时，它会继承scope的{{1}}父元素。

至少，我所假设的事情发生在这里，因为我以前从未见过这样做过。通常你会使用scope来定义你的指令中的某些变量，这样你就可以传入带有html标签的参数，如下所示：

<my-directive someVar="true">
  Some text
</my-directive>

然后你可以使用：

将someVar的值拉入指令

scope: {
  someVar: '@' //or '=' if you wanted two-way binding
}

然后您可以在链接到指令的控制器中使用someVar。

下拉父元素范围的一种更常见的方法是使用指令中的transclude赋值：

transclude: true

范围创建和batarang

1 个答案: