2016-07-26 13 views
1

So aktualisieren, ist mein Problem so:Angular - Mein Controller nicht meine Komponentendaten in der Ansicht

Ich habe eine Komponente, die zweimal verwendet wird, und es hat eine Vorlage definiert.

Komponente:

.component('topList', { 
    template: '<div class="well"> \ 
       <div class="title"> \ 
       <h3>{{$ctrl.model.title}}</h3><a href="#" class="close"><i class="ss-delete"></i></a> \ 
       </div> \ 
       <div ng-repeat="i in $ctrl.model.items" class="list-question"> \ 
       <div class="item"><span class="number">{{$index + 1}}</span> \ 
       <div class="description"> \ 
       <h4>{{(i.Count/ $ctrl.model.total)*100 | number:2}}% ({{i.Count}} de {{ $ctrl.model.total }})</h4> \ 
       <p>{{i.Description}}</p> \ 
       </div> \ 
       </div> \ 
       </div> \ 
       </div>', 
    controller: TopListController, 
    bindings: { 
     model: '=' 
    } 
}) 

function TopListController() { 

} 

Controller:

.controller('myController', function ($http, $scope, $controller, datesService) { 
    var ctrl = this; 

    $scope.api = function() { 
      var date = datesService.getDates(); 
      $http.get("apicall/date.from/date.to").then(function (response) { 
       ctrl.model = { 
        title: 'Title', 
        items: response.data.Items, 
        total: response.data.Total 
       }; 
      }); 
    } 

    $http.get("apicall/date1/date2").then(function (response) { 
     ctrl.model = { 
      title: 'Title', 
      items: response.data.Items, 
      total: response.data.Total 
     }; 
    }); 
}) 

HTML (Jade eigentlich):

div(ng-controller="myController as controller") 
     top-list(model="controller.model") 

Wenn die Seite geladen wird, wird die Komponente mit den Daten aus der befüllte Methode $ http.get, die aufgerufen wird, als der Controller erstellt wird, aber wenn ich die Methode api() aus dem HTML aufrufen, die dat a nicht ändern.

Im Aufruf der Methode api() von einem anderen Controller.

+1

Sie Misch 'controllerAs' mit' $ scope "im Controller, also könnten Sie verwirrt haben. Sie sollten idealerweise im Controller-Kontext ('this') plazieren. Dann könntest du eine Methode wie 'ng-click =" $ ctrl.api() "' –

+0

aufrufen. Ich vergesse es nicht, dass ich die Methode api von einem anderen Controller aus aufgerufen habe. – dpolicastro

+0

Können Sie den Teil "Aufruf der Methode api von einem anderen Controller" erklären? Sie meinen, die API-Methode wird nicht aus der Vorlage aufgerufen, die dem Controller entspricht? –

Antwort

0
  1. Sie brauchen nicht $scope.$apply(); zu anrufen, wenn Sie die Daten verwenden, Sie holen die Ansicht zu aktualisieren. Sie haben bereits Beobachter-Set mit 2-Wege-Datenbindung

  2. diese

    $http.get("apicall/date.from/date.to) 
    

    sollte dies

    (Sie " vergessen)
    $http.get("apicall/date.from/date.to") 
    
+0

Ich vergesse die "beim Editieren, und es ist wahr, ich brauche eigentlich nicht $ Scope. $ Apply(), aber es ändert nicht die Ansicht und ich weiß nicht, wie es funktioniert, auch nach einer Menge Forschung. – dpolicastro

+0

verwenden Sie' controllerAs'? sieht aus wie du nicht, wenn du $ scope verwendest. innerhalb deiner ctrl versuche 'var ctrl = this;' zu 'var ctrl = $ scope;' – svarog

+0

zu ändern Ich benutze controllerAs nicht .. Aber ich denke, dass ich habe Ich habe die Änderung gemacht und es hat nicht funktioniert .. – dpolicastro