角度UI树内容不能正常显示

角框架新增功能。我实现了角度用户界面树，它工作正常，但我有一个对齐问题。考虑下面的代码。角度UI树内容不能正常显示

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" /> 
    <link href="angular-ui-tree-master/examples/css/app.css" rel="stylesheet" /> 
    <link href="angular-ui-tree-master/dist/angular-ui-tree.min.css" rel="stylesheet" /> 
    <script src="jquery.min.js"></script> 
    <script src="angular.min.js"></script> 
    <script src="bootstrap/js/bootstrap.js"></script> 
    <script src="angular-ui-tree-master/dist/angular-ui-tree.js"></script> 
</head> 
<body> 
    <div ng-app="myApp" ng-controller="MyCtrl"> 
     <script type="text/ng-template" id="nodes_renderer.html"> 
      <div ui-tree-handle> 
       <span class="col-md-12">{{node.title}}</span> 
      </div> 
      <ol ui-tree-nodes="" ng-model="node.childlink"> 
      <li ng-repeat="node in node.childlink" ui-tree-node ng-include="'nodes_renderer.html'"> 
      </li> 
      </ol> 
     </script> 
     <div ui-tree="treeOptions" class="dd"> 
      <ol ui-tree-nodes="" ng-model="data" id="tree-root"> 
       <li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer.html'" data-drag-delay="100"></li> 
      </ol> 
     </div> 
    </div> 

    <script> 
     var myApp = angular.module('myApp', ['ui.tree']); 
     myApp.controller('MyCtrl', function ($scope) { 
      $scope.toggle = function (scope) { 
       console.log('menu collapse'); 
       scope.toggle(); 
      }; 
      $scope.data = [ 
      { 
       "id": "1", 
       "title": "node1", 
       "childlink": [ 
        { 
         "id": "2", 
         "title": "node 1.1", 
         "childlink": [ 
          { 
           "id": "3", 
           "title": "node 1.1.1", 
           "childlink": [] 
          }, 
           { 
            "id": "4", 
            "title": "node 1.1.2", 
            "childlink": [] 
           } 
         ] 
        }, 
        { 
         "id": "5", 
         "title": "node 1.2", 
         "childlink": [] 
        } 
       ] 
      } 
      ]; 
     }); 
    </script> 
</body> 
</html>

我累没有引导（类= “COL-MD-12”），它工作正常和内容正确对齐，但我需要沿着作品与引导（类=“COL-MD-12 “）内容不对齐 {{node.title}}

在我的项目自举获得在很多地方实行这样我不能够覆盖类COL-MD-12。

enter image description here

来源

2015-06-26 ipln

//尝试这样的....希望它会正常工作。

<!DOCTYPE html> 


    <script type="text/ng-template" id="treeHierarchi"> 
     <div ui-tree-handle class="tree-node tree-node-content"> 
      <a class="btn btn-success btn-xs" ng-if="item.children && item.children.length > 0" data-nodrag ng-click="toggle(this)"><span 
       class="fa" 
       ng-class="{ 
       'fa fa-arrow-right': !collapsed, 
       'fa fa-arrow-down': collapsed 
      }"></span></a> 
      <input type="text" data-ng-model="item.name" /> 
     </div> 
     <ol ui-tree-nodes="" ng-model="item.children" ng-class="{hidden: !collapsed}"> 
      <li ng-repeat="item in item.children" ui-tree-node ng-include="'treeHierarchi'"></li> 
     </ol> 
    </script> 



    <div class="panel panel-default"> 
     <div class="panel-heading">your heading</div> 
     <div class="panel-body"> 
      <div class="col-md-7"> 
       <form name="YourForm" role="form">   
        <div class="row"> 
         <div ui-tree data-nodrag id="tree-root"> 
          <ol ui-tree-nodes ng-model="data"> 
           <li ng-repeat="item in data" ui-tree-node ng-include="'treeHierarchi'"></li> 
          </ol> 
         </div> 
        </div> 

       </form> 
      </div> 
     </div> 
    </div>

来源

2015-10-27 04:57:07

角度UI树内容不能正常显示

回答

相关问题