javascript - 使用隔离范围的 Angular 指令

Question

我正在尝试创建一个 Angular 指令，它获取一些数据并根据输入修改范围变量，但我无法让它工作。

这是我的 JS 的简化版本:

var module = angular.module('myapp', []);

module.directive('checkDirective', function() {
  return {
    restrict: 'E',
    scope: { line: '@' },
    transclude: true,
    controller: function($scope) {
        $scope.newLine = $scope.line;
    },
    template: '<div ng-transclude></div>'
  };
});

这是我的 HTML:

<div ng-app="myapp">                           
    0
    <check-directive line="...">
        a{{line}}b{{newLine}}c
    </check-directive>
    1
</div>

这里有一个 fiddle :http://jsfiddle.net/k66Za/60/

如有任何帮助，我们将不胜感激!

Answer 1

嵌入的 HTML 范围是父范围的子范围，而不是指令范围。您可以使用传递给指令链接函数的 transclude 函数来更改范围。

link: function (scope, elem, attrs, ctrl, transcludeFn) {
  transcludeFn(scope, function (clone, scope) {
    elem.append(clone);
  });
}

http://jsfiddle.net/k66Za/64/

不过，我不建议这样做。相反，对我来说更有意义的是假设嵌入的内容将使用单独的范围并使用它。如果需要，您也可以创建一个单独的指令。