Javascript AngularJS-如何从其他控制器运行控制器？

我不熟悉angular，来自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>

我的两个控制器应该使用相同的模型，所以在其他so帖子的建议下，我创建了服务来获取和设置这个共享模型。问题是，在LibraryCtrl成功之前，我的仪表板Ctrl试图呈现其视图解决这个问题的方法是什么：让DashboardCtrl等待LibraryCtrl的成功？

---

此外，（这可能值得成为它自己的问题/帖子，）如果我的div.dashboard视图中的div.content元素将根据LibraryCtrl的成功JSON转到许多可能的子模板中的一个，我该如何做呢？在jquery模板中，每个模板都有id，jquery将呈现HTML并在需要时附加它。在angular中，我不确定如何选择一个模板并在另一个模板内进行渲染。这不需要像上面我的第一个粗体问题那样为我详细说明，但是在正确的方向上指出一点就好了

对于第一个问题：创建一个服务，而不是在

LibraryCtrl

中加载数据并在

仪表板Ctrl

中使用它。通过服务加载模型，并让两个控制器都使用它

.$资源

如果你还没看过，就看一眼吧。它为这类事情提供了一个很好的框架

关于你的第二个问题：这里是进行指令的理想场所。（大量角度问题的答案是“生成指令”，如果您正在生成可重用的小部件，这一点就更加重要了）。事实上，我会对整个仪表板执行一个指令，对“仪表板项”执行另一个指令。与其在指令声明中直接指定模板，不如使用templateUrl…它可以使用表达式的结果。根据类型将其指向不同的模板文件

或者，创建一个模板文件，并根据类型使用

ng开关

，以确定要显示的部分

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

---

跳到“编写指令（长版本）”。不要阅读编译和链接的内容；如果你需要的话就回去吧。在该页面上显示内容的顺序很不幸。

将数据加载到服务中，然后在两个控制器中使用该服务：

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;
            }
        };
    });

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

function LibraryCtrl($scope, sharedModels) {
    $scope.widgets = sharedModels;
}

function DashboardCtrl($scope, sharedModels) {
    $scope.widgets = sharedModels;
    sharedModels.then(function (x) {
        console.log(x); 
    });
}

myApp.factory('sharedModels', function($q,$timeout) {
    /*
    return $http({
        method: 'POST',
        url: '../Services/GetUserWidgetDetails',
        headers: {
            'Content-type': 'application/json'
        }
    })*/
    // Simulate http request.
    var data = $q.defer();    
    $timeout(function() {
        data.resolve([{WidgetName:'Sproket'}, {WidgetName:'Dohickey'}])
    }, 2000);
    return data.promise;
});