$ emit和$ broadcast替代不存在的控制器

我遇到了一個情況，我使用的angular插件只允許在其運行時在其控制器本身的$ scope中進行語言更改。

而我在這裏的問題是，一些控制器將不存在，直到視圖切換，但我需要確保當我更改標題中的語言時，插件的語言切換。

總結：
如何發送和廣播到不存在的控制器（其中控制器將只在視圖切換後可用）。請注意，ChildAController，ChildBController，..，ChildZController是分開的視圖。

angular.module('parent').controller('HeaderController', function($scope) { 
    $scope.changeLanguage = function (language) { 
     // trigger $scope.changePluginLanguage in every controller 
     // where ChildAController and ChildBController is of different view (and non-existent at the time) 
    } 
} 

angular.module('childA').controller('ChildAController', function($scope, CustomPlugin) { 
    $scope.changePluginLanguage = function(language) { 
     $scope.pluginOptions.LanguageUrl = language + ".json"; 
    } 
} 

angular.module('childB').controller('ChildBController', function($scope, CustomPlugin) { 
    $scope.changePluginLanguage = function(language) { 
     $scope.pluginOptions.LanguageUrl = language + ".json"; 
    } 
} 

... 
... 

angular.module('childZ').controller('ChildZController', function($scope, CustomPlugin) { 
    $scope.changePluginLanguage = function(language) { 
     $scope.pluginOptions.LanguageUrl = language + ".json"; 
    } 
}

視圖

<!DOCTYPE html> 
<html ng-app="app"> 
    <head></head> 
    <body> 
     <div ng-controller="HeaderController"> 
      <select ng-click="changeLanguage"> 
       <option ng-click="changeLanguage('English')">English</option> 
       <option ng-click="changeLanguage('Spanish')">Spanish</option> 
      </select> 
     </div> 
     <div ui-view></div> 
    </body> 
</html> 

// View A 
<div ng-controller="ChildAController"> 
    <CustomPlugin pluginOptions="pluginOptions"></CustomPlugin> 
</div> 

// View B 
<div ng-controller="ChildBController"> 
    <CustomPlugin pluginOptions="pluginOptions"></CustomPlugin> 
</div>

來源

2016-01-31 stackdisplay

你如何改變觀點？它看起來像這不是一個'SPA' – Malkus

@Malkus哎呀我更新了代碼。 '''

'''部分是視圖更改部分。正在使用角度ui路由器。 – stackdisplay

$發射和$播放替代

使用$watch和服務保存當前語言的價值。

客戶端控制器

angular.module('childA').controller('ChildAController', function($scope, MyService) { 
    $scope.$watch(MyService.languageGet, function (language) { 
     $scope.pluginOptions.LanguageUrl = language + ".json"; 
    } 
}

的廠家售後服務

angular.module("myApp").factory("MyService", function() { 
    var language = "default"; 
    function getLanguage() { 
     return language; 
    }; 
    function setLanguage(value) { 
     language = value; 
     return value; 
    }; 
    return { getLanguage: getLanguage, 
      setLanguage: setLanguage 
    }; 
});

在父控制器（或控制器），你可以設置語言。

MyService.setLanguage(newLanguage);

當客戶端控制器被實例化時，$watch將設置的語言，然後在每個循環消化，將在必要時檢查語言設置和更新。

有關$watch的更多信息，請參閱AngularJS $rootScope.scope API Reference -- $watch。

來源

2016-01-31 17:45:02 georgeawg

$ emit和$ broadcast替代不存在的控制器

回答

相關問題