javascript - 从 'current' Controller 访问 'root' 范围

标签 javascript angularjs

我有一个 Controller ,我认为它是我的“根” Controller ,它是用 ng-controller 属性声明的 Controller ,然后是通过 动态实例化的其他一些 Controller $路由提供者。我想声明一个函数,该函数可通过任何动态/子 Controller 范围内的 ng-click 属性使用。

我可以在我的根 Controller 上声明这个函数,例如

$scope.announce = function () {
    alert($scope.specificName);
}

然后我在所有“子” Controller 的所有作用域中看到它,但是此函数中使用的 $scope 是根 Controller 的本地变量,而不是当前事件的作用域/ Controller 。如何访问此函数中的事件子作用域?

最佳答案

我在这个 plunker 中有一些工作涵盖了一些用例。

该函数将接受一个参数。此参数在每个范围内将具有相同的名称。

<body ng-app="MyApp">
  <div ng-controller="mainCtrl">
    <button ng-click="announce(specificName)">announce in main</button>
    <div ng-controller="subCtrl">
      <button ng-click="announce(specificName)">announce in sub</button>
    </div>
  </div>
</body>

你的主 Controller 看起来像这样:

angular.module('MyApp').controller('mainCtrl', function($scope, ItemService){

    $scope.specificName = "I'm main !";
    $scope.announce = function(specificName){
      alert(specificName);
    }
    
});

并且只需覆盖子 Controller 中的“specificName”变量:

angular.module('MyApp').controller('subCtrl', function($scope, ItemService){

    $scope.specificName = "I'm a sub !";
    
});

要在纯 JS 中调用该函数,您可以在每个 Controller 中执行此操作:

$scope.announce($scope.specificName);

编辑:

我刚刚意识到还有其他解决方案可以满足您的需求。您可以使用工厂或服务来共享该功能。

服务的外观:

myApp.service("AnnounceService",
    function(){
        var service = {};

        service.announce = function(toAnnounce){
              alert(toAnnounce);
        }

        return service;
    }
);

你的 Controller 会是什么样子:

angular.module('MyApp').controller('subCtrl', function($scope, AnnounceService){

    $scope.announce = AnnounceService.announce;
    $scope.specificName = "I'm a sub !";

    //Equivalent
    $scope.announce($scope.specificName);
    AnnounceService.announce($scope.specificName);
    
});

这与您需要在每个 Controller 中声明 specificName 并将其传递给函数是一回事。但该功能可用于您应用程序的任何部分。你只需要注入(inject)服务和

详细信息:

最后,抽象部分不是函数,而是每个 Controller 中变量的名称。一种约定俗成的命名。

如果此变量与状态相关,您可以将其添加到状态定义中。 (如果是这样的话,我可以试着给你举个例子。)

我也不建议将完整的 $scope 给另一个。这在 Angular 上不是一个好的做法。

希望这能解决您的问题,或者提供足够的线索。

请随意询问更具体的事情,我会编辑答案以适应您的需求。

关于javascript - 从 'current' Controller 访问 'root' 范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30613044/

相关文章:

javascript - jQuery inArray 函数在更改选择时不获取值

javascript - 如何组织和减少 AngularJS Controller 的大小?

css - 调整 Angular Material 中 md-input-container 的全长

javascript - 在 AngularJS Controller 规范中测试来自服务的回调

javascript - jquery 中的备用行表

javascript - 在 javascript 中为数组创建函数。

javascript - 特定的 div 未在特定位置呈现

javascript - 撤消/重做不能正常工作,缩放后的绘画也不能正常工作

javascript - Angular,添加范围违反了我的指令

javascript - 使用 ng-pattern 仅用于数字的正则表达式(无空格或特殊字符)