angularjs – 从resolve函数访问数据而不重新连接控制器
发布时间:2020-12-17 07:11:36 所属栏目:安全 来源:网络整理
导读:如何在不重置控制器的情况下从解析功能访问数据? 我们目前正在开发一个使用angular-ui-router的项目. 我们有两个单独的视图:左边是父元素列表,右边是元素子数据. 如果在左侧选择父级,我们将其子级数据解析为右侧的子视图. 为了不对子控制器(和视图)进行自
如何在不重置控制器的情况下从解析功能访问数据?
我们目前正在开发一个使用angular-ui-router的项目. 如果在左侧选择父级,我们将其子级数据解析为右侧的子视图. 为了不对子控制器(和视图)进行自动加载,在选择不同的父元素时,我们设置notify:false. 我们设法在不重新加载控制器和视图的情况下“重新解析”子控制器数据,但数据(范围)不会刷新. 我们做了一个小掠夺者来证明我们的问题here 首先单击一个数字以实例化控制器childCtrl.每次跟随点击都应该更改子范围数据 – 这不起作用. 解决方法
不太好,但工作解决方案是使用事件.好吧,也许它不是那么糟糕,至少它并不复杂.
https://plnkr.co/edit/SNRFhaudhsWLKUNMFos6?p=preview angular.module('app',[ 'ui.router' ]) .config(function($stateProvider) { $stateProvider.state('parent',{ views:{ 'parent':{ controller: 'parentCtrl',template: '<div id="parent">'+ '<button ng-click="go(1)">1</button><br>'+ '<button ng-click="go(2)">2</button><br>'+ '<button ng-click="go(3)">3</button><br>'+ '</div>' },},url: '' }); $stateProvider.state('parent.child',{ views:{ 'child@':{ controller: 'childCtrl',template:'<b>{{ id }}</b>' } },url: '/:id/child',resolve: { detailResolver: function($http,$stateParams,$rootScope) { return $http.get('file'+$stateParams.id+'.json') .then(function(response) { alert('response ' + response.data.id); $rootScope.$broadcast('newData',response.data); return response.data; }); } } }); }) .controller('parentCtrl',function ($log,$scope,$state) { $log.info('parentCtrl'); var notify = true; $scope.go = function (id) { $state.go('parent.child',{id: id},{notify:notify}); notify = false; }; }) .controller('childCtrl',function ($scope,$log,detailResolver,$interval) { /* * some stuff happens here */ $log.info('childCtrl detailResolver.id == ' + detailResolver); $scope.$on('newData',function (event,detailResolver) { $scope.id = detailResolver; }); $scope.id = detailResolver; $interval(function(){ console.log(detailResolver.id) },1000) }) ; 编辑: angular.module('app',{ views: { 'parent': { controller: 'parentCtrl',template: '<div id="parent">' + '<button ng-click="go(1)">1</button><br>' + '<button ng-click="go(2)">2</button><br>' + '<button ng-click="go(3)">3</button><br>' + '</div>' },{ views: { 'child@': { controller: 'childCtrl',template: '<b>{{ id }}</b>' } },resolve: { detailResolver: turnToObservable(['$http','$stateParams',function($http,$stateParams) { //Have to be decorated either be this or $inject return $http.get('file' + $stateParams.id + '.json') .then(function(response) { alert('response ' + response.data.id); return response.data; }); }]) } }); }) .controller('parentCtrl',function($log,$state) { $log.info('parentCtrl'); var notify = true; $scope.go = function(id) { $state.go('parent.child',{notify: notify}); notify = false; }; }) .controller('childCtrl',function($scope,$interval) { /* * some stuff happens here */ $log.info('childCtrl detailResolver.id == ' + detailResolver); detailResolver.addListener(function (id) { $scope.id = id; }); }); function turnToObservable(promiseMaker) { var promiseFn = extractPromiseFn(promiseMaker); var listeners = []; function addListener(listener) { listeners.push(listener); return function() { listeners = listeners.filter(function(other) { other !== listener; }); } } function fireListeners(result) { listeners.forEach(function(listener) { listener(result); }); } function createObservable() { promiseFn.apply(null,arguments).then(fireListeners); return { addListener: addListener }; } createObservable.$inject = promiseFn.$inject; return createObservable; } function extractPromiseFn(promiseMaker) { if (angular.isFunction(promiseMaker)) { return promiseMaker; } if (angular.isArray(promiseMaker)) { var promiseFn = promiseMaker[promiseMaker.length - 1]; promiseFn.$inject = promiseMaker.slice(0,promiseMaker.length - 1); return promiseFn; } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |