gpt4 book ai didi

javascript - 如何在其他 Controller AngularJS 中观察变量

转载 作者:太空宇宙 更新时间:2023-11-04 15:30:27 25 4
gpt4 key购买 nike

我有一个名为 histogram demo 的组件,其中有一个单独的 Controller ,其中有一个名为 $scope.selectedElements 的变量,我想在主 appCtrl 中查看此变量> Controller 。如果没有 $rootScope,我如何能够访问此变量。

主要 HTML

<html lang="en-US" ng-app="histogram-test" ng-controller="appCtrl">

<div class="histogram-container"> <histogram-demo options = "options" data="data"></histogram-demo></div>
</html>

App.JS

angular
.module('histogram-test')
.config(function ($httpProvider, usSpinnerConfigProvider) {
$httpProvider.defaults.withCredentials = true;
usSpinnerConfigProvider.setDefaults({
// see http://spin.js.org/
color: 'white',
radius: 30,
width: 8,
length: 16,
shadow: true,
});
})
.controller('appCtrl', function ($scope, appConfig, $rootScope, auth, $state) {
/** HERE is where I want to watch $scope.selectedElements in Component.js **/}

组件.JS

angular
.module('histogram-test').component('histogramDemo', {
bindings: {
data: "=",
options: "=",
},
templateUrl: templateUrl,
controller: controller,
controllerAs: 'vm',
});

function controller($state, $scope) { ...
$scope.selectedElements = []; ...}

最佳答案

您可以简单地考虑将方法传递给 component ,并在更改时从组件调用该方法 selectedElements 。另外,通过使您的绑定(bind)使用 < 来使您的应用程序更具性能,遵循单向数据流。 (单向绑定(bind))。

bindings: {
data: "<",
options: "<",
selectedItemChange: '&'
},

然后你的指令元素将看起来像

<histogram-demo 
options="options"
data="data"
selected-item-changed="itemChanged(items)">
</histogram-demo>

每当你改变时vm.selectedItems Controller 组件内的变量,请调用 vm.selectedItemChange({items: vm.selectedItems}) ,所以 histogram-demo 的消费者组件将具有接收 selectedItems 的方法数组。

关于javascript - 如何在其他 Controller AngularJS 中观察变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44832616/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com