AngularJS: Wie kann ich Daten über Controller hinweg austauschen?

Question

Ich möchte Titel dynamisch erhalten. Wie teile ich $ scope.title in indexCtrl?

var app = angular.module('app', []); 

app.controller('firstCtrl', function($scope){ 
    $scope.title = 'OneFC'; 
}) 

app.controller('secondCtrl', function($scope){ 
    $scope.title = 'UFC'; 
}) 

app.controller('indexCtrl', function(){ 
    // i want to get the title here depends on the active state in ui-router. 
} 

Answer 1

Wir haben einige Möglichkeiten, dies zu tun. Mit der Eigenschaft rootscope kann das genauso gehandhabt werden wie mit der globalen Variable in Ihrer App. Aber ich liebe OOP und ich denke, wir sollten die Verarbeitung von Daten in einem Service einkapseln.

-Code für den Service:

app.factory('titleFactory',function(){ 
    var _title = null; 
    return { 
     setTitle: function(title) { 
      this._title = title; 
     }, 

     getTitle: function() { 
      return this._title; 
     } 
    } 
}); 

nun in jedem Controller brauchen Sie nur injizieren und rufen und festlegen Titel Ihre Daten zu verarbeiten.

Set Titel Wert (gleich für secondCtrl):

app.controller('firstCtrl', function($scope,titleFactory){ 
     titleFactory.setTitle('OneFC'); 
}) 

Titel können nun von allen anderen Steuerungen wie folgt zugegriffen werden:

app.controller('indexCtrl', function(){ 
    $scope.title = titleFactory.getTitle(); 
}); 

Answer 2

versuchen, $rootScope.title zu verwenden?

app.controller('indexCtrl', ['$rootScope','$scope',function($rootScope, $scope){ 
    $rootScope.$on("toindexCtrl", function (e) { 
     $scope.$apply(function() { 
      $scope.title = $rootScope.title; 
     }); 
    }); 
}]) 

app.controller('secondCtrl', ['$rootScope','$scope', function($rootScope, $scope){ 
    $rootScope.title = 'UFC'; 
    $rootScope.$broadcast('toindexCtrl'); 
}]) 

Dieser Code funktioniert für mich. Ich verwende auch $ broadcast, um zu hören, wenn sich der Wert ändert.

Answer 3

Ich würde empfehlen, es als Daten in Ihrem Routen Definitionen vorbei, genau wie dieser (Sie können, dass Sie waren nicht bewusst, falls tun):

$stateProvider.state("page1", { 
    url: "/page1", 
    data: { 
     title: "Your Title Here" 
    }, 
    views: { 
    } 
}).state("page2", { 
    url: "/page2", 
    data: { 
     title: "Your Other Title Here" 
    }, 
    views: { 

    } 
}) 

Danach Sie es in Ihrem Controller wie folgt verwenden können :

app.controller('indexCtrl', function($state){ //Note that you inject state 
    $scope.pageTitle= $state.data.title; 
} 

Hoffnung funktioniert dies für Sie

Grüße