3

次の点を考慮してください。

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

バタラン

ここに画像の説明を入力

私が見たところ、$rootScope は表示されません (ただし、表示されていた場合はScope (001)というラベルが付けられると思います)。

JSでスコープを true に変更すると:

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

$ rootScopeがScope (002)にプッシュされているようです:

ここに画像の説明を入力

誰かが何が起こっているのか説明してもらえますか? $rootScope が押し下げられているように見えるのはなぜですか? その上には何がありますか？ここに jsbin リンクがあります: http://jsbin.com/udALigA/1/

4

1 に答える 1

0

通常、ディレクティブは独自のscope(この場合はScope (002)) を作成しますが、それを設定scope: trueすると、親要素のmyDirectiveを継承します。scope

少なくとも、私はそれがここで起こっていると仮定しています。通常、スコープを使用してディレクティブ内で特定の変数を定義し、次のように html タグでパラメーターを渡すことができます。

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

someVar次に、次を使用して値をディレクティブにプルできます。

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

someVar次に、ディレクティブにリンクしたコントローラーで使用できます。

親要素のスコープをプルダウンするより一般的な方法はtransclude、ディレクティブで割り当てを使用することです。

transclude: true
于 2014-06-02T14:49:13.997 に答える