AngularJs和兩個控制器

我正在編寫一個運行AngularJs的應用程序&在前端引導 - 使用angularjs的$ http調用API ......我在一個應用程序中有兩個控制器 - 第一個控制器顯示此人的姓名和第二控制器顯示的演出列表，這個人已經看到...AngularJs和兩個控制器

<html lang="en" ng-app="myapp"> 
... 
    <div class="panel-body" ng-controller="Ctrl"> 
     <div class="row"> 
      <div class="col-sm-3" style="height: 50px;"> 
       <div class="well well-sm"> 
        First Name: 
        <a href="#" editable-text="user.fname">{{ user.fname || "empty" }}</a> 
       </div> 
      </div> 
      <div class="col-sm-3" style="height: 50px;"> 
       <div class="well well-sm"> 
        Last Name: 
        <a href="#" editable-text="user.lname">{{ user.lname || "empty" }}</a> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="list-group" ng-controller="Ctrl2"> 
     <div ng-repeat="obj in performances" > 
      <div class="list-group-item"> 
       <h4 class="list-group-item-heading"> 
       <span class="badge"> 
       {{$index+1}}</span> {{ obj["Perf_name"] || "empty" }}</h4> 
       <p class="list-group-item-text"> 
         Date: {{ obj["Perf_dt"] || "empty" }}<br /> 
         Theater: {{ obj["Theater"] || "empty" }}<br /> 
       </p> 
      </div> 
     </div> 
    </div> 
... 
</html>

在JS文件我有以下代碼

聲明我的變量和模塊

var app = angular.module("myapp", ["xeditable"]); 
var q = getUrlParameter("q"); // get the query param 
var baseurl = "https://some.domain/service/getCRM"; 
var baseurl2 = "https://some.domain/service/getPerformances";

創建服務中使用由兩個控制器

app.service('crmService', function() { 
    this.id = 0; 
    this.getID = function() { return this.id }; 
    this.setID = function (newid) { this.id = newid; }; 
});

定義控制器＃1

app.controller('Ctrl', function ($scope, $http, crmService) { 
    $http({ 
     method: 'GET', 
     url: baseurl, 
     respondType: 'json', 
     headers: { 
      'Accept': 'application/json', 
      'Content-Type': 'application/json' 
     }, 
     params: { 
      phone_no: q 
     } 
    }).then(function successCallback(response) { 
     $scope.user = { 
      fname: response.data[0]["FirstName"], 
      lname: response.data[0]["LastName"] 
    } 
     crmService.setID(response.data[0]["CRM_ID"]); 

     console.log("*** OUTPUT LINE 1: " + crmService.getID()); 

    }, function errorCallback(response) { 
     console.log("**ERROR"); 
     console.log(response); 
    }); 
});

定義控制器＃2

app.controller('Ctrl2', function ($scope, $http, crmService) { 
    console.log("*** OUTPUT LINE 2: " + crmService.getID()); 

    var promise = $http.get(baseurl2 + "?crm_id=" + crmService.getID()); 
    promise.then(
     function (response) { 
      $scope.performances = response.data; 
    }); 
});

控制檯輸出

*** OUTPUT LINE 2: 0 
*** OUTPUT LINE 1: 123456

問題：

爲什麼第二控制器之前的第一輸出，我認爲這是因爲在默認情況下AngularJs異步執行的代碼，如果是這樣的話，爲什麼「承諾」不起作用？
我需要做的是，我在第一個控制器塊中進行GET調用，並使用我的服務分配客戶ID ...然後繼續到第二個控制器塊並使用客戶ID，從我的服務中這是第一個控制器模塊中設置） - 得到了客戶的表演

所以我得先控制器工作正常，但第二個控制器保持以爲客戶ID爲 - 當它應該是

我錯過了什麼？

FYI：當我硬編碼到使用的第二個控制器的ID，我得到的實際表現紀錄回來 - 所以我知道一旦我弄清楚如何我控制器之間的共享價值觀一切都會

來源

2016-02-25 Didier Jean Charles

爲什麼是第一

由於第二控制器，一旦它的實例化記錄該ID之前，所述第二控制器輸出的，而第一個記錄它一旦它已經接收，異步，對HTTP請求的響應。承諾確實奏效，因爲輸出記錄在控制檯中。

我需要做的是，我在第一個控制器塊中進行GET調用，並使用我的服務分配客戶ID ...然後我去到第二控制器模塊，並使用客戶ID，從我的服務

你做你的工作更復雜的比它應該是：使用單個控制器就好辦多了這裏，因爲該模型的第二個取決於第一個做什麼。

你可以從第一控制器廣播的事件信號，該ID已定，並聽取在第二個事件在那朵時間來獲取數據。

app.controller('Ctrl', function ($scope, $http, $rootScope, crmService) { 
    $http({ 
     ... 
    }).then(function successCallback(response) { 
     ... 
     crmService.setID(response.data[0]["CRM_ID"]); 
     console.log("*** OUTPUT LINE 1: " + crmService.getID()); 
     $rootScope.$broadcast('crmIdChanged'); 
    }; 
}); 

app.controller('Ctrl2', function ($scope, $http, crmService) { 
    function getPerformances() { 
     var id = crmService.getID(); 
     if (id != 0) { 
      var promise = $http.get(baseurl2 + "?crm_id=" + crmService.getID()); 
      promise.then(
       function (response) { 
        $scope.performances = response.data; 
      }); 
     } 
    } 

    getPerformances(); 
    $scope.$on('crmIdChanged', getPerformances); 
});

甚至可以從服務本身進行廣播。

來源

2016-02-25 23:34:27

你可以提供一個例子...我想我明白你的意思，但它真的會幫助，如果你可以給我一個例子 - 由於@JB Nizet –

什麼例子？單個控制器？ –

控制器內的廣播的一個例子，以信號通知ID已改變/已設置 –

AngularJs和兩個控制器

回答

相關問題