Angular中的全局事件处理程序

Global event handler in Angular

本文关键字：事件处理 程序 全局 Angular      更新时间：2023-09-26

我不确定我应该如何在我的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。对新人有价值的东西

我该如何做这样的事?

编辑:我不想让它在单个控制器中。如你所见，这个下拉菜单是OUTSIDE ui-view。handler应该在控制器之外。否则，我将被迫在整个应用程序的每个控制器中处理此更改。

基本上，您需要编写一个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);
    }
}]);

我还添加了一个功能小提琴的链接。

在给你解决方案之后，我想补充一点，在rootscope中有价值不是一个好主意。如果你张贴你想要达到的目标，这里可能有人可以更好地指导你。

您可以使用ng-selected，并将选择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;
    };
}]);
相关文章：