1

我正在尝试制作一个 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/

任何帮助，将不胜感激！

4

2 回答 2

1

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

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

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

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

于 2015-02-17T22:02:44.947 回答
-1

那是因为嵌入的 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/

于 2015-02-17T22:04:49.887 回答