javascript - AngularJS-如何从其他 Controller 运行 Controller ？

我是新手，来自jquery的思维方式。我已经阅读了大部分主要站点以及其他一些站点，并且尝试通过构建可自定义的仪表板应用程序来进一步学习。

我的HTML：

    <div class="library">
        <div class="dropdown" ng-controller="LibraryCtrl">
            <div id="lib-{{widget.WidgetID}}" ng-repeat="widget in widgets">
                <div data-toggle="tooltip" title="{{widget.WidgetDesc}}">
                    <h2>
                        {{widget.WidgetName}}</h2>
                    <div class="libraryWidget {{widget.WidgetReportType}}">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="dashboard" ng-controller="DashboardCtrl">
        <div>
            <article>
                <div id="dash-{{widget.WidgetID}}" class="jarviswidget" ng-repeat="widget in widgets">
                    <header role="heading">
                        <h2>
                            {{widget.WidgetName}}</h2>
                    </header>
                    <div role="content" class="content">
                        <div class="inner-spacer">
                            <div class="table">
                            </div>
                        </div>
                    </div>
                </div>
            </article>
        </div>
    </div>

本质上，我正在为可用窗口小部件的“库”构建一个视图，为当前为其“仪表盘”选择的窗口小部件构建另一个视图。 HTML在这里仍然非常简单。库视图可以很好地呈现，但仪表板视图则不能。

JavaScript：

function LibraryCtrl($scope, $http, sharedModels) {
    $http({
        method: 'POST',
        url: '../Services/GetUserWidgetDetails',
        headers: {
            'Content-type': 'application/json'
        }
    }).success(function (data) {
        sharedModels.setProperty(data);
        $scope.widgets = data;
        console.log(data); // logs 2nd with expected data
    });
}

function DashboardCtrl($scope, sharedModels) {
    var libraryWidgets = sharedModels.getProperty();
    $scope.widgets = libraryWidgets;
    console.log(libraryWidgets); // logs 1st with empty object
}

angular.module('dashboard', [])
    .service('sharedModels', function () {
        var libraryModel = {};

        return {
            getProperty: function () {
                return libraryModel;
            },
            setProperty: function (data) {
                libraryModel = data;
            }
        };
    });

我的两个控制器都应该使用相同的模型，因此在其他SO帖子的建议下，我创建了用于获取和设置此共享模型的服务。问题是，我的DashboardCtrl尝试在LibraryCtrl成功之前渲染其视图。解决这个问题的有角度的方法是什么：让DashboardCtrl等待LibraryCtrl成功？

此外，如果我的div.dashboard视图中的div.content元素要转到许多可能的子模板之一（取决于LibraryCtrl的成功JSON），（这可能是它自己的问题/帖子），我该怎么办这样做吗？在jquery模板中，每个模板都有ID，jquery将呈现HTML并将其附加到需要的地方。在角度，我不确定如何选择一个模板并在另一个模板中进行渲染。不需要像上面我的第一个大胆问题那样为我清楚地说明这一点，但是朝着正确方向的一点将是很棒的！

最佳答案

第一个问题：创建服务而不是在LibraryCtrl中加载数据并在DashboardCtrl中使用它们。通过服务加载模型，并让两个控制器都使用它。

http://docs.angularjs.org/api/ngResource。$资源

如果您尚未查看angular-seed，请浏览一下。它为此类事情提供了良好的框架。

第二个问题：这是指令的理想场所。（对大量Angular问题的答案是“制定指令”，如果要制作可重用的小部件，这是双重的）。实际上，我会为整个仪表板做一个指令，为“仪表板项目”做一个指令。与其直接在指令声明中指定模板，不如使用templateUrl ...，它可以使用表达式的结果。根据类型将其指向不同的模板文件。

或者，创建一个模板文件，并根据类型使用ng-switch确定要显示的哪个部分。

有关创建指令的信息，请查看教程，也请参阅here。

跳至“书写指令（长版）”。暂时不要阅读汇编和链接内容。如果需要的话，再回到它。不幸的是，在该页面上显示内容的顺序。