如何确定是否存在指令transclude内容 [英] How to determine if exist transclude content in directive

问题描述

假设你有一个像下面的指令。

Say you have a directive like below.

指令

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

  };
});

查看

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

我想知道是否有知道有没有办法存在transcluded在HTML内容的＆LT;人的方式＆gt;

感谢。

推荐答案

使用在指令中的链接功能像如下图所示。

Use the link function in directive for finding the child nodes like as shown below

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);
      }

工作演示

Working Demo

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) {

});

输出

这篇关于如何确定是否存在指令transclude内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！