Question

我有一个有转录的指令。已转换的内容是一种表单，其中有一个提交选项，用于调用（父）控制器中的方法。从transcluded范围调用此方法，因此我在控制器中访问的任何变量都可以通过this.variable访问，因为这反映了调用者（当前）范围。但是，$scope.variable未定义，因为$scope是父作用域的作用域，它是控制器的作用域。

我是否应该使用this来访问表单值，还是我应该通过（父）控制器中的$scope实现访问？

免责声明：我知道我没有使用控制器功能，而且现在我无法为项目更改它。

用于证明问题的Plunker： http://plnkr.co/edit/TdgZFIRNbUcHNfe3a7uO?p=preview

您可以在更改文本框中的值时看到指令内的值更新。这是预期的，因为它们都指的是被转换的范围。指令外的{{name}}不会更改，因为这是父作用域而不是转换作用域。单向交通。

什么是正确的解决方案？使用this.name或修改指令，以便$scope.name可以在指令外使用吗？

对于喜欢掠夺者代码的人：

HTML：

<body ng-app="docsTransclusionExample">
  <div ng-controller="Controller">
    {{name}}
    <my-dialog>
      Check out the contents, {{name}}!
      <form>
        <input ng-model="name">
      </form>
    </my-dialog>
  </div>
</body>

指令：

(function(angular) {
  'use strict';
angular.module('docsTransclusionExample', [])
  .controller('Controller', function($scope) {
    $scope.name = 'Tobias';
  })
  .directive('myDialog', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      templateUrl: 'my-dialog.html'
    };
  });
})(window.angular);

指令模板：

<div class="alert" ng-transclude></div>

Answer 1

这与＆＃34; The Dot Rule＆＃34;有关。在角度。

这意味着，当你有范围层次结构，并且子范围试图修改父范围时，它会创建它自己的范围。

当您使用数据对象时，您可以使用点＆＃34;来访问成员，因此您不必直接更改范围，而不是创建新的子范围

在你的情况下

$scope.name = 'Tobias';

shuold更改为

$scope.data = {name: 'Tobias'};

见plunker： http://plnkr.co/edit/RqORVm8r4jph532dT6nY?p=preview

进一步阅读：

Why don't the AngularJS docs use a dot in the model directive?

https://www.youtube.com/watch?v=DTx23w4z6Kc

PS。

这与指令翻译无关（whitch是关于构建DOM）。
如果您在指令中执行：scope: {}，则明确创建子范围。

TranscludeScope

1 个答案: