Question

我想知道如何在指令之间实现范围继承。

例如：

<html ng-app="app">
<head>
    <title>TEST DRAG</title>
</head>
<body ng-controller="main">

    <dragcont>
        <dragitem></dragitem>
    </dragcont>



    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script type="text/javascript">

        (function(){

            var app = angular.module("app", []);

            app.controller("main", function($scope){
                $scope.name = "Hello";
            })
            .directive("dragcont", function(){
                return {
                    restrict: "AE",
                    scope: {

                    },
                    controller: function($scope){
                        $scope.name = "dragcont";
                    },
                    link: function(scope, EL, attrs){

                    }
                }
            })
            .directive("dragitem", function(){
                return {
                    restrict: "AE",
                    controller: function($scope){
                        console.log($scope.name);
                    },
                    link: function(scope, EL, attrs){

                    }
                }
            })


        })()

    </script>
</body>
</html>

当我运行它时，它总是打印Hello。似乎dragitem可以从主控制器继承范围，但是如果我希望它从dragcont继承呢？

Answer 1

隔离范围用于＆＃34;隔离＆＃34;指令的内部工作原理。因此，范围既不从其父级继承，也不能从子指令和表达式继承。

因此，对于isolate foo指令：

.directive("foo", function(){
  return {
    scope: {},
    link: function(scope){
      scope.inner = "hidden from outside";
    }
  }
})

子指令和表达式不会继承其隔离范围。

<foo>
  <span>{{inner}} will be undefined</span>
</foo>

使用template：

另一方面，指令的作者已知template指令foo，因此它确实使用了隔离范围。如果foo有模板，则以下内容可行：

scope: {},
template: '<span>{{inner}}</span>',
link: function(scope){
   scope.inner = "hidden from outside";
}

使用手动＆＃34;转换＆＃34;：

有时，允许指令的用户指定自定义模板是有意义的。该指令的作者也可能希望揭露特殊的＆＃34;魔法＆＃34;要在自定义模板中使用的变量，与$index的{{1}}，$first等不同。

这可以通过手动转换完成：

ng-repeat

现在，您可以在已转换内容和外部范围内访问scope: {}, transclude: true, template: '<div>{{header}}</div>\ <placeholder></placeholder>', link: function(scope, element, attrs, ctrls, transclude){ scope.header = "I am foo"; // still only visible in the template // create a new scope, that inherits from parent, but a child of isolate scope var anotherScope = scope.$parent.$new(false, scope); anotherScope.$magic = "magic"; // transclude/link against anotherScope transclude(anotherScope, function(clonedContents){ element.find("placeholder").replaceWith(clonedContents); } }变量（假设它具有$magic）

$scope.name = "John"

生成的DOM将是：

<foo>
  <div>I can see {{name}} and {{$magic}}</div>
</foo>

Answer 2

看起来你仍然缺少一些能够使指令从另一个继承的工作。

我认为此代码可以帮助您：

http://codepen.io/anon/pen/EaPNqp?editors=101

另外，您可能需要阅读：

http://david-barreto.com/directive-inheritance-in-angularjs/

CODE：

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

app.controller('myController', function($scope) {
  $scope.data1 = "1";
  $scope.data2 = "2";
})var app = angular.module('myApp', []);

app.controller('myController', function($scope) {
  $scope.data1 = "1";
  $scope.data2 = "2";
})
.directive('myWrapper', function() {
  return {
    restrict: 'E'
    , transclude: true
    , scope: true
    , template: '<h1>{{ title }}</h1><ng-transclude></ng-    transclude><h2>Finished wrapping</h2>'
    , controller: function($scope, $element, $attrs){
      $scope.title = $attrs.title;
      $scope.passdown = $attrs.passdown;
    }
  };
})
.directive('myInner1', function() {
  return {
    restrict: 'E'
    , require: 'myWrapper'
    , template: 'The data passed down to me is {{ passdown }}'
  };
})
.directive('myInner2', function() {
  return {
    restrict: 'E'
    , require: 'myWrapper'
    , template: 'The data passed down to me is {{ passdown }}'
  };
});
.directive('myWrapper', function() {
  return {
    restrict: 'E'
    , transclude: true
    , scope: true
    , template: '<h1>{{ title }}</h1><ng-transclude></ng-    transclude><h2>Finished wrapping</h2>'
    , controller: function($scope, $element, $attrs){
      $scope.title = $attrs.title;
      $scope.passdown = $attrs.passdown;
    }
  };
})
.directive('myInner1', function() {
  return {
    restrict: 'E'
    , require: 'myWrapper'
    , template: 'The data passed down to me is {{ passdown }}'
  };
})
.directive('myInner2', function() {
  return {
    restrict: 'E'
    , require: 'myWrapper'
    , template: 'The data passed down to me is {{ passdown }}'
  };
});

被发现非常有用。请务必阅读本文下面的评论。

注意“要求”属性。

问候。

混淆AngularJS中指令之间的范围继承

2 个答案:

CODE：