如何确定是否存在transclude内容指令[复制](How to determine if exi

2019-10-20 15:03发布

这个问题已经在这里有一个答案:

  • 检测是否transclude内容已经给出了一个angularjs指令 4个回答

假设你有象下面这样的指令。

指示

module.directive('person', function() {
  return {
    restrict: 'E',
    scope: {
      header: '='
    },
    transclude:true,
    template: '<div ng-transclude></div>'

  };
});

视图

  <person>
    .....
  </person>

我想知道,如果有知道存在于transcluded HTML内容的方式<person>

谢谢。

Answer 1:

使用link function的指令,寻找类似如下的子节点

link: function(scope, element, attributes)
      {
            var count = element.find('div')[0].children.length;
            var content = element.find('div')[0];
            console.log(content);
            console.log("Transcluded html content nodes:"+count);
      }

工作演示

HTML

<div ng-app='myApp' ng-controller="Controller">
    <person>
        <input type="text" ng-model="user" class="ng-scope ng-pristine ng-valid"/>
        <input type="text" ng-model="place" class="ng-scope ng-pristine ng-valid"/>
    </person>
</div>

脚本

var app = angular.module('myApp', []);
app.directive('person', function() {
  return {
    restrict: 'E',
    scope: {
      header: '='
    },
    transclude:true,
    template: '<div ng-transclude></div>',
    link: function(scope, element, attributes){
        var count = element.find('div')[0].children.length;
        var content = element.find('div')[0];
        console.log(content);
        console.log("Transcluded html content nodes:"+count);
    }
  };
});

app.controller('Controller', function ($scope) {

});

产量



文章来源: How to determine if exist transclude content in directive [duplicate]