Question

我正在尝试操作树列表的指令，我想知道我是否可以在DOM中操作HTML。我想只在没有孩子的情况下添加超链接。这是代码。

＆＃13;

var appBo = angular.module('appBo', []);

appBo.directive('tree', function() {
  return {
    restrict: 'E', // tells Angular to apply this to only html tag that is <tree>
    replace: true, // tells Angular to replace <tree> by the whole template
    scope: {
      t: '=src' // create an isolated scope variable 't' and pass 'src' to it.  
    },    
    template: '<ul><branch ng-repeat="c in t.children" src="c"></branch></ul>'    
  };
})

appBo.directive('branch', function($compile) {
  return {
    restrict: 'E', // tells Angular to apply this to only html tag that is <branch>
    replace: true, // tells Angular to replace <branch> by the whole template
    scope: {
      b: '=src' // create an isolated scope variable 'b' and pass 'src' to it.  
    },    
    //template: '<li><a href="{{b.hyperlink}}">{{ b.name }}</a></li>',
    template: '<li><a>{{ b.name }}</a></li>',
    link: function(scope, element, attrs) {
      //// Check if there are any children, otherwise we'll have infinite execution
      
      var has_children = angular.isArray(scope.b.children);
      
      //// Manipulate HTML in DOM
      if (has_children) {        
        element.append('<tree src="b"></tree>');
        
        // recompile Angular because of manual appending
        $compile(element.contents())(scope); 
      }else{
        //add hyperlink for 'Blouse', 'Tank', 'Skirt', 'Dress'
        
        // recompile Angular because of manual appending
        $compile(element.contents())(scope); 
      }
      
      //// Bind events
      element.on('click', function(event) {
          event.stopPropagation();          
        
          if (has_children) {
            element.toggleClass('collapsed');
          }
      });      
    }
  };
})

appBo.controller('TreelistController', function ($scope) {
  
  $scope.categories = {
    children: [
      {
        name: "Women",
        children: [
          {
            name: "Top",
            children: [
              {
                name: "Blouse", hyperlink: "blouse.com"
              },
              {
                name: "Tank", hyperlink: "tank.com"
              }
            ]
          },
          {
            name: "Bottom",
            children: [
              {
                name: "Skirt", hyperlink: "skirt.com"
              },
              {
                name: "Dress", hyperlink: "dress.com"
              }
            ]
          }
        ]
      }
    ]
  };    
});

＆＃13;

所以，我想为大多数孩子（衬衫，背心，裙子，连衣裙）提供超链接

Answer 1

您可以使用ng-href

template: '<li><a ng-href="{{b.hyperlink}}">{{ b.name }}</a></li>',

Forked from your codepen，它有效。

Angular ngHref

AngularJS树列表中的动态模板

1 个答案: