AngularJS - 如何從承諾中呈現模板和數據

Question

好吧，我對 Angular 還是很陌生，在過去的兩天里，我試圖找到一種好的方法來做到這一點，但失敗了。 我也不知道標題好不好。

我正在嘗試使用菜單制作一個簡單的頁面。 該人將單擊菜單鏈接，然后菜單下方的視圖應相應呈現（當然無需刷新整個頁面）。 聽起來很容易。

但問題是，將有一個供管理員使用的菜單和一個供普通用戶使用的菜單，因此該菜單是通過 ajax 加載的。 這是我得到的一個例子：

[
    {
        name: "Manage games",
        templateUrl: "/view/mygames.html",
        url: "/games",
    },
    {
        name: "Weekly Reports",
        templateUrl: "/view/myreports.html",
        url: "/reports"
    },
    {
        name: "Manage Users",
        templateUrl: "/view/users.html",
        url: "/users",
        adminRequired: true
    }
];

加載菜單后，當單擊菜單元素時，我想獲取對url屬性進行 ajax 調用的數據，並且獲取此數據的模板也將是對templateUrl屬性的 ajax 調用。

那么，這是如何實現的呢？ 基本上我想要的是有一個指令/組件/任何東西，默認情況下它將是空的，不顯示或呈現。 但是當我點擊菜單中的一個元素時，我將 $broadcast 一個帶有 dataUrl/templateUrl 的事件到指令/組件/任何東西，它會進行兩個 ajax 調用，一個兩個獲取數據，另一個到獲取模板，兩者都完成后，它將呈現並出現在頁面上。

任何方式，或建議做類似的事情，將不勝感激

順便說一句，我使用的是 Angular 1.5.7

Answer 1

您應該使用路由（在我的示例中是ui-router ）來實現這一點。
ui-router 有一個resolve屬性，可以讓你解析控制器依賴項，然后讓你將它們注入你的控制器以使用它們。

這是我制作的一個完整示例（對不起，可憐的用戶界面）：

HTML：

<div ng-app="app">
  <div ng-controller="homeCtrl as vm">
    <menu items="vm.items"></menu>
  </div>
  <div>
    <ui-view></ui-view>
  </div>
</div>

JS：

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

app.controller('gamesCtrl', function(data) {
  this.title = data.title;
}).
controller('reportsCtrl', function(data) {
  this.title = data.title;
}).
controller('usersCtrl', function(data, adminData) {
  this.title = data.title;
  this.removedUsers = adminData.removedUsers;
}).
controller('homeCtrl', function() {
  this.items = [{
    name: 'Manage games',
    state: 'games'
  }, {
    name: 'Weekly Reports',
    state: 'reports'
  }, {
    name: 'Manage Users',
    state: 'users',
    adminRequired: true
  }];
});

app.component('menu', {
  bindings: {
    items: "="
  },
  template: '<div ng-repeat="item in  $ctrl.items"><span ng-click="$ctrl.goToState(item)">{{item.name}}</span></div>',
  controller: function($state) {
    this.goToState = function(item) {
      console.log('redirecting to state:' + item.state);
      $state.go(item.state);
    }
  }
});

app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider.
  state('games', {
    url: '/games',
    template: '<div><h1>{{vm.title}}</h1></div>', // use templateUrl..
    resolve: {
      data: function($q) {
        return $q.when({
          title: 'games'
        })
      }
    }, // return injectables who return promises and inject them into your ctrl
    controller: 'gamesCtrl as vm'
  }).
  state('reports', {
    url: '/reports',
    template: '<div><h1>{{vm.title}}</h1></div>', // use templateUrl..
    resolve: {
      data: function($q) {
        return $q.when({
          title: 'reports'
        })
      }
    }, // return injectables who return promises and inject them into your ctrl
    controller: 'reportsCtrl as vm'
  }).
  state('users', {
    url: '/users',
    template: '<div><h1>{{vm.title}}</h1><div>Removed Users:</div><div ng-repeat="user in vm.removedUsers">{{user}}</div></div>', // use templateUrl..
    // return injectables who return promises and inject them into your ctrl
    resolve: {
      data: function($q) {
        return $q.when({
          title: 'users'
        })
      },
      adminData: function($q) {
        return $q.when({
          removedUsers: ['user1', 'user2', 'user3']
        })
      }
    },
    controller: 'usersCtrl as vm'
  }).
  state('default', {
    url: '/default',
    template: '<h1>This is the default state</h1>'
  });

  $urlRouterProvider.otherwise('/default');
});

JSFIDDLE 。

備注：

• 配置狀態時，您應該使用 templateUrl 而不是模板。
• 我已經使用$q.when來證明承諾的回報。 您可能會使用$http.get\\pos t 代替。