2016-04-16 4 views
0

Ich habe eine einfache App, Anzeige der Dateiliste von Server-Upload-Datei-Dispay aktualisierte Liste. Ich habe zwei Controller "Upload" und "Dateien" unter verschiedenen Divs.rufen Sie eine Funktion von einem anderen Controller

Ich möchte loadData() aus Dateien aufrufen können, so dass meine Dateiliste nach dem Upload aktualisiert wird.

UPDATED DOCE
app.controller ('myCtrl1', Funktion ($ Umfang, $ HTTP) {

$scope.fileupload=function() 
{ 
$scope.loadData(); 
} 
//load file list 
$scope.loadData = function() { 
$scope.fileslist = ["abc.abc", "cde.cde"]; 

} 

});

HTML AKTUALISIERT

<body ng-app="myapp" nng-controller="myCtrl1"> 
<div> 
     <div> 
     <form id="upload-form" method="post" action=""> 
      <input type="file" name="file"/> 
      <input type="submit" value="upload" class="button" ng-click="loadData()"/> 
     </form> 
     </div> 
</div> 

<div> 
<div> 
<form name="myForm"> 
    <ul> 
     <li ng-repeat="fileslist in fileslist"> 
      <label> 
       <input type="radio" ng-model="$parent.name" name="name" value="{{fileslist}}" required />{{fileslist}} 
      </label> 
     </li> 
    </ul> 
    <button ng-disabled="myForm.$invalid" class="button">Submit</button> 

Ich will nur "loaddata()" Funktion von myCtrl1 Controller ausgeführt werden, wenn ich auf die Schaltfläche Controller in Upload klicken

AKTUALISIERT Problem - Ich habe ein Code ändern und fusionierte den Controller, als Service wurde nicht helfen mir helfen, Controller

So zu aktualisieren Nun ist das Problem, ich kann die erforderlichen Daten laden, warum LoadData() aber verschwindet in einer zweiten ...

+1

einen Dienst machen, dass aussetzt loaddata, injiziert, den Dienst zu beiden Controllern. –

Antwort

1

Sie können eine Methode von einem Controller innerhalb einer Steuerung nicht aufrufen. Sie müssen die Methode extrahieren, einen Dienst erstellen und ihn aufrufen. Dies wird auch den Code voneinander entkoppeln und es mehr prüfbar

(function() { 
angular.module('app', []) 
    .service('svc', function() { 
     var svc = {}; 

     svc.method = function() { 
      alert(1); 
     } 

     return svc; 
    }) 
    .controller('ctrl', [ 
     '$scope', 'svc', function($scope, svc) { 
      svc.method(); 
     } 
    ]); 
})(); 

Beispiel machen: http://plnkr.co/edit/FQnthYpxgxAiIJYa69hu?p=preview

Für vollständige Referenz klicken Sie bitte auf LINK1 oder LINK2

Hope this Ihnen hilft.

+0

Das Hinzufügen eines Dienstes kann Daten von einem Controller zu einem anderen erhalten, aber ... das hilft mir nicht, die Daten auf meiner Seite zu aktualisieren, weil ich auf einen anderen Controller geklickt habe. (In der Liste kann ich keinen Weg finden auch nach deinem Beispiel) – Manojcode

0

Sie können die Methoden $ emit und $ on verwenden, um eine Kommunikation zwischen zwei Controllern herzustellen.

app.controller('first', ['$scope', '$rootScope', 
    function($scope) { 
     $rootScope.$on("CallMyMethod", function(){ 
      $scope.mymethod(); 
     }); 

     $scope.mymethod = function() { 
      // your code goes here 
     } 
    } 
]); 
app.controller('second', ['$scope', '$rootScope', 
    function($scope) { 
     $scope.childmethod = function() { 
      $rootScope.$emit("CallMyMethod", {}); 
     } 
    } 
]); 

Sie können Ihre Daten während des Aufrufs von $ rootScope. $ Emit an mymethod senden.

0

Sie müssen $controller Service injizieren, um einen Controller in einem anderen Controller zu instanziieren.

app.controller('TestCtrl2', ['$scope', '$controller', function ($scope, $controller) { 
    var testCtrl1ViewModel = $scope.$new(); //You need to supply a scope while instantiating. 
    //Provide the scope, you can also do $scope.$new(true) in order to create an isolated scope. 
    //In this case it is the child scope of this scope. 
    $controller('TestCtrl1',{$scope : testCtrl1ViewModel }); 
    testCtrl1ViewModel.myMethod(); //And call the method on the newScope. 
}]); 

In jedem Fall kann man nicht nennen TestCtrl1.myMethod(), weil Sie die Methode auf dem $ Umfang und nicht auf der Controller-Instanz angeschlossen haben.

Wenn Sie den Controller gemeinsam nutzen, dann wäre es immer besser zu tun: -

.controller('TestCtrl1', ['$log', function ($log) { 
    this.myMethod = function() { 
    $log.debug("TestCtrl1 - myMethod"); 
    } 
    }]);