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>

这是一个小提琴：http://jsfiddle.net/k66Za/60/

任何帮助将不胜感激！

Answer 1

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

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

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

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

Answer 2

那是因为被转换的HTML不使用指令的隔离范围，而是其父节点之一。使用正确范围的方法是使用链接函数的特定transclude参数。

另外，@表示角度期望大括号之间的表达式，例如{{someVariable}}或{{ 'someString' }}

http://jsfiddle.net/floribon/r611o3sa/

module.directive('checkDirective', function() {
  return {
    restrict: 'E',
    scope: { line: '@' },
    transclude: true,
    link: function(scope, element, attrs, ctrl, transclude) {   
      var isolatedScope = scope;

      transclude(scope.$parent, function(clone, scope) {
        scope.line = isolatedScope.line;
        scope.newLine = scope.line;
      });
    },
    template: '<div ng-transclude></div>'
  };
});

您应该在此处详细了解有关移植的内容：http://angular-tips.com/blog/2014/03/transclusion-and-scopes/

使用隔离范围的Angular指令

2 个答案: