Angularjs Sharing-Methoden zwischen den Controllern

Ich habe gelesen this article auf Angular Validierung und dachte, es wäre gut, in meinem eigenen Projekt zu verwenden. Es funktioniert wirklich gut und ich möchte es erweitern Zugriff auf Methoden in anderen Controllern nach erfolgreicher Validierung des Formulars. Ich habe verschiedene Möglichkeiten ausprobiert, aber ich kann die Methoden im $ scope-Objekt nicht sehen.Angularjs Sharing-Methoden zwischen den Controllern

<!DOCTYPE html> 
<html> 
    <head> 
    <link data-require="[email protected]" 
     data-semver="3.0.0" 
     rel="stylesheet" 
     href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> 
    <script data-require="[email protected]" 
     data-semver="1.0.8" 
     src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> 
    <script src="rcSubmit.js"></script> 
    <script src="loginController.js"></script> 
    <script src="loginApp.js"></script> 
    </head> 

    <body> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-xs-12 col-sm-6 col-sm-offset-3"> 
      <h1>Simple Login Form</h1> 
      <form name="loginForm" novalidate 
      ng-app="LoginApp" ng-controller="LoginController" 
      rc-submit="login()"> 
      <div class="form-group" 
       ng-class="{'has-error': rc.loginForm.needsAttention(loginForm.username)}"> 
      <input class="form-control" name="username" type="text" 
       placeholder="Username" required ng-model="session.username" /> 
      <span class="help-block" 
       ng-show="loginForm.username.$error.required">Required</span> 
      </div> 
      <div class="form-group" 
       ng-class="{'has-error': rc.loginForm.needsAttention(loginForm.password)}"> 
       <input class="form-control" name="password" type="password" 
       placeholder="Password" required ng-model="session.password" /> 
       <span class="help-block" 
       ng-show="loginForm.password.$error.required">Required</span> 
      </div> 
      <div class="form-group"> 
       <button type="submit" class="btn btn-primary pull-right" 
       value="Login" title="Login"> 
       <span>Login</span> 
       </button> 
      </div> 
      </form> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

Ich hatte gehofft, dass jemand mir sagen kann, was ich vermisse, um diese Arbeit zu machen. Ich habe eine plunkr gegabelt.

Quelle

2014-01-30 user686483

Könnten Sie ein bisschen präziser über das sein, was Sie erreichen möchten? Ich verstehe nicht, wie das Teilen von Methoden zwischen Controllern mit der Validierung zusammenhängt.Normalerweise besteht der Weg zur Validierung darin, eine Direktive zu erstellen und auf den Model-Controller zuzugreifen. –

Hallo Hugo, ich möchte auf einige Methoden zugreifen, die ich in einem gemeinsamen Dienst habe. Der Dienst funktioniert gut für andere Controller, aber wenn ich versuche, ihn mit diesem Validierungscode zu verwenden, kann ich auf die Methoden zugreifen. Wie könnte ich zum Beispiel im folgenden Code auf die Methoden in meinem Service zugreifen? Ich habe alles versucht, woran du denken kannst, aber ich werde immer noch undefiniert. // Controller für Login definieren var LoginController = ['$ scope', Funktion ($ scope) { $ scope.session = {}; $ scope.login = function() { // Prozess $ scope.session Warnung ('angemeldet!'); }; }]; – user686483

Der richtige Weg dazu wäre ein Winkelservice. Zum Beispiel:

app.factory('svc', function() { 
    var msg="original..."; 
    return { 
     setMessage: function(x) { 
      msg=x; 
     }, 
     getMessage: function() { 
      return msg; 
     } 
    }; 
});

Auf diese Weise können die fucntions innerhalb svc in jedem Controller zugreifen können, die Sie svc in injizieren:

app.controller("ctrl1",function($scope,svc,$timeout){ 
    $scope.someText=svc.getMessage(); 
    $scope.$watch("someText",function(v){ 
    svc.setMessage(v); 
    }); 
}); 

app.controller("ctrl2",function($scope,svc){ 
    $scope.msg=svc.getMessage(); 
    $scope.$watch(svc.getMessage,function(v){ 
    $scope.msg=v; 
    }); 
});

Siehe this demo plunk (I ignoriert, die Sie zupfen zur Verfügung gestellt, weil es eine Menge hatte Lärm).

EDIT

die Service-Methode und Formularvalidierung ausführen, sind wirklich nicht miteinander verwandt, see plunk.

EDIT

Wenn Sie die Dienste oder Controller von einer Anwendung in einem anderes verwenden möchten, verweisen nur die Abhängigkeiten in Ihrem Haupt-App und die Dienste im Haupt App in Ihrem zweiten App definiert nennen. Wenn Ihre Haupt-App demoApp1 heißt, können Sie eine weitere App namens dempApp2 und die Referenz demoApp1 in demoApp2 erstellen und alle in demoApp1 innerhalb von demoApp2 definierten Dienste verwenden. Sehen Sie das Plunk Ich habe es aktualisiert, um zu demonstrieren, was Sie fragen.

Quelle

2014-01-30 09:29:27

Hallo Mohammad, danke, dass du die Frage so schnell beantwortet hast. Ich gebe dem Service einen Versuch und lasse Sie wissen, wie es mir geht. – user686483

Hallo Mohammad, der Dienst funktioniert gut und ich bin in der Lage, Methoden über die Anwendung zu teilen, aber U diese Methoden immer noch nicht im Validation Controller zu sehen. Irgendwelche Ideen? – user686483

Ich verstehe nicht, was Sie meinen, indem Sie die Methoden im Validierungs-Controller sehen? –

Der beste Ansatz für die Kommunikation zwischen den beiden Controllern ist die Verwendung von Ereignissen.

Scope Documentation

In diesen Besuchen $on, $broadcast und $emit.

Im allgemeinen Anwendungsfall wurde die Verwendung von angular.element(catapp).scope() für die Verwendung außerhalb der Winkelsteuerungen konzipiert, wie bei jquery-Ereignissen.

$scope.$on("myEvent", function (event, args) { 
    $scope.rest_id = args.username; 
    $scope.getMainCategories(); 
});

Und im zweiten Controller würden Sie gerade tun

$scope.initRestId = function(){ 
    $scope.$broadcast("myEvent", {username: $scope.user.username }); 
};

können Sie versuchen, mit dem firstApp Modul als:

Ideal in Ihrer Verwendung wäre ein Ereignis in Controller 1 als schreiben eine Abhängigkeit von der secondApp, wo Sie die angular.module deklarieren. Auf diese Weise können Sie mit der anderen App kommunizieren.

Quelle

2014-11-04 12:47:18 EpokK

In Ihrem Beispiel muss der zweite Controller Kind des ersten Controllers sein. Auch wenn Ihr erster Controller nicht auf der Seite angezeigt wird, passiert nichts. –

Angularjs Sharing-Methoden zwischen den Controllern

Antwort

Verwandte Themen