簡體   English   中英

Angular 中的全局事件處理程序

[英]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的函數一起使用:

JSFiddle

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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM