AngularJS - 如何從其他控制器運行控制器？

我是新來的角，來自jQuery的思維方式。我已經閱讀了大部分主要站點和其他一些站點，我試圖通過構建可定製的儀表板應用程序來進一步學習。AngularJS - 如何從其他控制器運行控制器？

我的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並在需要時添加它。在角度上，我不確定如何選擇模板並在另一個模板內渲染。對我來說這不需要拼寫出來，就像我上面第一個粗體問題一樣，但是正確的方向將會很棒！

來源

2013-05-06 user883036

對於你的第一個問題：而不是加載數據在LibraryCtrl並使用它在DashboardCtrl，創建一個服務。通過服務加載模型並讓兩個控制器都使用它。

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

如果你沒有看過angular-seed，偷看吧。它爲這類事情提供了一個很好的框架。

您的第二個問題：這是指令的理想場所。（對於大量的Angular問題的答案是「做出一個指令」，如果你製作可重用的小部件，這是非常重要的）。事實上，我會爲整個儀表板做一個指令，而另一個用於'儀表板項目'。不是直接在指令聲明中指定模板，而是使用可以使用表達式結果的templateUrl ...。根據類型將其指向不同的模板文件。

或者，創建一個模板文件並根據類型使用ng-switch來確定要顯示哪個部分。

有關創建指令的信息，請參閱教程，並看看here。

跳到「編寫指令（長版）」。不要閱讀彙編和鏈接的東西，如果你需要它回去。在該頁面上顯示的東西的順序是不幸的。

來源

2013-05-06 20:37:18

移動數據的加載到服務，然後使用該服務中的兩個控制器：

http://jsfiddle.net/ADukg/2631/

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

來源

2013-05-06 21:00:44

AngularJS - 如何從其他控制器運行控制器？

回答

相關問題