angular中transclude和scope之间的关系

最新推荐文章于 2019-03-15 22:27:10 发布

原创最新推荐文章于 2019-03-15 22:27:10 发布 · 164 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular #transclude #scope #关系 #覆盖

angular 专栏收录该内容

5 篇文章

订阅专栏

本文探讨了AngularJS中指令的使用方式及其如何与作用域交互。特别关注了transclude功能，展示了如何根据不同需求选择性地使用父作用域或子作用域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码


app.controller('MainCtrl', function($scope) {
  $scope.person = {
    name: 'John Doe',
    profession: 'Fake name'
  };

  $scope.header = 'Person';
});

app.directive('person', function() {
  return {
    restrict: 'EA',
    scope: {
      header: '='
    },
    transclude:true,
    template: '<div ng-transclude></div>',
    link: function(scope, element, attrs) {
      scope.person = {
        name: 'Directive Joe',
        profession: 'Scope guy'
      };

      scope.header = 'Directive\'s header';
    }
  };
});


<body ng-controller="MainCtrl">
  <person header="header">
    <h2>{{header}}</h2>
    <p>Hello, I am {{person.name}} and,</p>
    <p>I am a {{person.profession}}</p>
  </person>
</body>

以上代码会变成


<body ng-controller="MainCtrl" class="ng-scope">
  <person header="header" class="ng-isolate-scope"><div ng-transclude="">
    <h2 class="ng-scope ng-binding">Directive's header</h2>
    <p class="ng-scope ng-binding">Hello, I am John Doe and,</p>
    <p class="ng-scope ng-binding">I am a Fake name</p>
  </div></person>
</body>

即原有的属性不会被替换，而原来没有的属性，则会使用新的

如果想通过指令来控制接受父级的scope值还是子集的scope值，可以通过如下代码区分


app.directive('person', function() {
  return {
    restrict: 'EA',
    scope: {
      header: '='
    },
    transclude:true,
    link: function(scope, element, attrs, ctrl, transclude) {
      scope.person = {
        name: 'Directive Joe',
        profession: 'Scope guy'
      };

      scope.header = 'Directive\'s header';
      transclude(scope.$parent, function(clone, scope) {
        element.append(clone);
      });
    }
  };
});

和


app.directive('person', function() {
  return {
    restrict: 'EA',
    scope: {
      header: '='
    },
    transclude:true,
    link: function(scope, element, attrs, ctrl, transclude) {
      scope.person = {
        name: 'Directive Joe',
        profession: 'Scope guy'
      };

      scope.header = 'Directive\'s header';
      transclude(scope, function(clone, scope) {
        element.append(clone);
      });
    }
  };
});