[英]Global event handler in Angular
我不確定我應該如何處理我的 angular 應用程序中的事件。
我在我的 .run() 函數中設置了一些 $rootScope 屬性:
.run(['$rootScope', '$state', '$stateParams', '$location',
function($rootScope, $state, $stateParams, $location) {
$rootScope.something = "something_";
}
]);
我的 HTML 看起來像:
<body class="dashboard" ng-app="app">
<select name="active_project" id="active_project">
<option value=""></option>
</select>
<div id="content" ui-view></div>
</body>
現在 - 當用戶更改下拉值(active_project)時,我想將 $rootScope.something 值更改為新值。
我應該怎么做這樣的事情?
編輯:我不想在單個控制器中制作它。 如您所見,此下拉列表位於 ui-view 之外。 所以處理程序應該在控制器之外的某個地方。 如果沒有,我將被迫在應用程序的每個控制器中處理此更改。
基本上你需要寫一個 ng-change 來更新變化。 你的 html 將變成:
<body class="dashboard" ng-app="app" ng-controller='myController'>
<select ng-change='selectChanged()' ng-model='myModel' name="active_project" id="active_project">
<option value=""></option>
</select>
<div id="content" ui-view></div>
</body>
你還需要定義一個控制器來監聽這個變化:
app.controller('myController', ['$scope', '$rootScope', function(scope, rootScope){
scope.selectChanged = function(){
rootScope.something = scope.myModel;
alert(rootScope.something);
}
}]);
我還添加了一個指向功能正常的fiddle的鏈接。
在給你解決方案之后,我想補充一點,在 rootscope 中擁有價值並不是一個好主意。 如果您發布您想要實現的目標,那么這里可能有人可以更好地指導您。
希望這可以幫助。
您可以將ng-selected
與將 select ng-model
分配給$rootScope
的函數一起使用:
HTML:
<div ng-app="app" ng-controller="dummy">
<select name="active_project" ng-selected="selectIt()" ng-model="somethingFromSelect" id="active_project">
<option value="hello">hello</option>
<option value="world">world</option>
</select>
{{something}}
</div>
JS:
var app = angular.module("app", []);
app.run(['$rootScope', '$location',
function($rootScope, $location) {
$rootScope.something = "";
}
]);
app.controller('dummy', ['$rootScope', '$scope', function ($rootScope, $scope) {
$scope.selectIt = function () {
$rootScope.something = $scope.somethingFromSelect;
};
}]);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.