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

问题描述

假设您有一个如下所示的指令.

指令

module.directive('person', function() {返回 {限制:'E'，范围: {标题:'='},转置:真，模板:'<div ng-transclude></div>'};});

查看

 .....</人>

我想知道是否有办法知道中是否存在嵌入的html内容.

谢谢.

解决方案

使用指令中的link function来查找如下所示的子节点

link: 函数(作用域、元素、属性){var count = element.find('div')[0].children.length;var content = element.find('div')[0];控制台日志(内容)；console.log("嵌入的 html 内容节点:"+count);}

工作演示

html

<人物><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"/></人>

脚本

var app = angular.module('myApp', []);app.directive('person', function() {返回 {限制:'E'，范围: {标题:'='},转置:真，模板:'<div ng-transclude></div>',链接:功能(范围，元素，属性){var count = element.find('div')[0].children.length;var content = element.find('div')[0];控制台日志(内容)；console.log("嵌入的 html 内容节点:"+count);}};});app.controller('Controller', function ($scope) {});

输出

Say you have a directive like below.

Directive

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

  };
});

View

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

I want to know if there is a way to know there exist transcluded html content in the <person>.

Thanks.

解决方案

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>

script

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

});

Output

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