相关疑难解决方法(0)

我有一个控制器,我写的,我在多个地方使用我的应用程序ng-include和ng-repeat,就像这样:

<div
  ng-repeat="item in items"
  ng-include="'item.html'"
  ng-controller="ItemController"
></div>

在控制器/模板中,我希望item价值存在,而整个事物都围绕着这个想法.但是,现在,我需要以稍微不同的方式使用控制器,没有ng-repeat,但仍然需要能够传入item.我看到ng-init并认为它可以做我需要的,像这样:

<div
  ng-init="item = leftItem"
  ng-include="'item.html'"
  ng-controller="ItemController"
></div>
<div
  ng-init="item = rightItem"
  ng-include="'item.html'"
  ng-controller="ItemController"
></div>

但这似乎并没有奏效.任何人都有任何想法如何在像这样的单一实例中传入变量的范围？

编辑:上面的控制器正在加载leftItem和rightItem值,如下所示:

.controller('MainController', function($scope, ItemModel) {
    ItemModel.loadItems()
        .then(function(items) {
            $scope.$apply(function() {
                $scope.leftItem = items.left;
                $scope.rightItem = items.right;
            });
        });
});

我正在构建一个Web应用程序,我需要使用列表显示树.我的基本结构如下:

* Node 1
    * Node 1.1
        * Node 1.1.1
            * Node 1.1.1.1
        * Node 1.1.2
    * Node 1.2

http://jsfiddle.net/QffFm/1/

我试图在角度或引导程序中找到一些我可以使用的东西:

• 在列表的第一个视图中,它被扩展到第三层.在我的小提琴中,我希望看到节点1,节点1.1,节点1.1.1,节点1.1.2和节点1.2(除第4层外的所有节点 - 节点1.1.1.1)
• 单击列表样式图标(不是节点的单词名称)节点将折叠或展开
• 理想情况下,我希望图标更改也取决于项目是否展开.如果下面有更多的右箭头,如果已经展开则向下箭头,如果没有孩子,可能是常规列表项

我是AngularJS的新手,也是Bootstrap的新手.我看到Angular有一个手风琴功能,似乎并没有完全处理我需要它的一切.

在我将大量逻辑编码到处理不同情况的Web应用程序之前,我会喜欢最好的方法.我认为这一定是一个常见的问题,所以也许有一些我可以利用的现成品.任何指导都将非常感谢.

HTML代码:

<div ng-app="myApp" ng-controller="controller">
    <my-directive></my-directive>
    <table style="width: 100%"><tbody><td>
        <tree items="tree"></tree>
    </td></tbody></table>
</div>

角度代码:

var app = angular.module('myApp', []);

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

    $scope.tree=[{"name":"Node 1","items":[{"name":"Node 1.1","items":[{"name":"Node 1.1.1","items":[{"name":"Node 1.1.1.1","items":[]}]},{"name":"Node 1.1.2","items":[]}]},{"name":"Node 1.2","items":[]}]}];

});
app.directive('tree', function() {
    return {
        template: '<ul><tree-node ng-repeat="item in items"></tree-node></ul>',
        restrict: 'E',
        replace: true,
        scope: {
            items: '=items',
        }
    };
});

app.directive('treeNode', function($compile) …

我正在研究一些Bootstrap-UI选项卡,但我无法在templateURL不操纵页面URL的情况下找到在线实例.这是我想做的事情:

HTML

<uib-tabset active="active">
    <uib-tab ng-repeat="tab in model.tabs" index="$index" heading="{{tab.title}}">
        {{tab.content}}
    </uib-tab>
</uib-tabset>

JS

model.jo = {...} // a gigantic JSON object - needs to be available in the templates.
model.tabs = [
    {
        title: "Visualized",
        content: url('vis.html')
    },
    {
        title: "Pure JSON",
        content: url('json.html')
    }
]

我在网上发现的大部分内容都使用$routeProvider和修改$locationProvider网址以显示不同的标签,例如:http://embed.plnkr.co/TMN3KNlS4Dv90SvbTQKJ/.我不想那样做.

有没有办法定义templateUrl你为组件做的事情？

另外,我需要我的JSON对象model.jo,在html页面中.