Angular 控制器加载()
Angular controller load()
这对很多人来说都是琐事,但我以前从未使用过 angular,我需要帮助来完成一个简单的任务,因为我被困住了。
我的 ng-controller processctrl 声明了一个 load()
方法。
我的视图有两次调用 ng-controller="processoctrl"
,导致 load()
方法两次调用 运行。 processctrl 也有一个 属性 currentPhase 开始 null 并且 load()
设置它的值。我可以只写 ($scope.currentPhase || load())
来防止双重 load()
,但是到 currentPhase 的绑定发生在转发器的顶部(在 DOM 中)。
我可以将对象 属性 放入 $rootScope 并从 processoctrl.scope.load() 更新它,但它会变成疯狂。
我可以简单地将 $($(".headerCurrentPhase")[0]).html($scope.currentPhase) 放入我的 load() 方法中,但这也太疯狂了。
我可以在其他地方将 load()
重写为 getProcesses = function(){}
和 $rootScope.$emit('getProcesses',{})
并写入控制器 $rootScope.$on('getProcesses',getProcesses)
以防止这种双重 load()
,但我认为这是冗余,那么如何简单地调用控制器函数而不是 load()?或者如何实现这个简单的任务?使用指令?
查看:
<div ng-include src="'includes/overview-header.html'"></div>
<div ng-include src="'includes/process-info.html'"></div>
摘自 includes/overview-header.html :
<div class="col-md-12">
....
<h4><strong>currentPhase</strong></h4>
<p ng-controller="processoctrl">
<span class="label label-primary headerCurrentPhase" ng-bind="currentPhase"></span>
</p>
</div>
摘自 includes/process-info.html :
<tbody ng-controller="processctrl">
<tr ng-repeat="Process in Processes|orderBy:'ID'">
<td>{{Process.isCurrent}}</td>
<td>{{Process.isCurrent}}</td>
<td>{{Process.ID}}</td>
<td>{{Process.Title}}</a></td>
</tr>
</tbody>
processoctrl
(function (app) {
app.controller('processctrl', function ($scope, $rootScope, $routeParams, factorysvc) {
$scope.Processes = [];
$scope.currentPhase = null;
load();
//($scope.currentPhase || load())
function load() {
var promiseGet = factorysvc.getPsby($routeParams.itemId);
promiseGet.then(function (data) {
$scope.Processes = data;
$rootScope.root.empreendimento.currentPhase = $scope.currentPhase = data[0].currentPhase.Title;
}, function (err) {
$scope.Message = "Error " + err.status;
});
}
})}(angular.module('sgaapp')));
真的需要 2 个包含吗?
如果 overview-header 在视图之间共享,那么我们可以在 $rootScope 级别拥有 currentPhase 或拥有父级控制器并拥有它。
如果 overview-header 仅用于此视图,那么我们可以将两个 html 合并为一个,并在包装标签处设置 processctrl。
伙计,我没听懂你想做什么,但我想给你一些建议:
你的逻辑很复杂,你应该重新考虑一下,因为现在很烂;
包含在 angular 中也很糟糕。真的。你根本不应该使用它。如何避免?好吧,有两个选择。
- 首先是使用客户端路由(针对页面);与其使用内置路由,不如使用 ui-router。您将能够使用嵌套状态和路由;
- 其次是使用指令而不是包含。真的,想象一下 - 页眉或页脚都可以是指令,您只需在需要时将其包含在页面中即可。
对我来说 - 我同时使用第一个和第二个解决方案。
您应该避免在 $rootScope
中放置任何内容。也许它不会杀死你,有时它是唯一的解决方案,但是,你知道,这是一种不好的做法。
如果你需要存储数据并在控制器之间共享,更好的选择是我们的工厂(或其他服务,但工厂最通用)。
示例:
app.factory('MyFactory', function () {
return {
myData: 'some default value',
someCommonFuction: function (a, b) {
return a + b;
}
};
});
除了数据存储,您还可以将工厂用作实用程序-class,具有常用功能
这对很多人来说都是琐事,但我以前从未使用过 angular,我需要帮助来完成一个简单的任务,因为我被困住了。
我的 ng-controller processctrl 声明了一个 load()
方法。
我的视图有两次调用 ng-controller="processoctrl"
,导致 load()
方法两次调用 运行。 processctrl 也有一个 属性 currentPhase 开始 null 并且 load()
设置它的值。我可以只写 ($scope.currentPhase || load())
来防止双重 load()
,但是到 currentPhase 的绑定发生在转发器的顶部(在 DOM 中)。
我可以将对象 属性 放入 $rootScope 并从 processoctrl.scope.load() 更新它,但它会变成疯狂。
我可以简单地将 $($(".headerCurrentPhase")[0]).html($scope.currentPhase) 放入我的 load() 方法中,但这也太疯狂了。
我可以在其他地方将 load()
重写为 getProcesses = function(){}
和 $rootScope.$emit('getProcesses',{})
并写入控制器 $rootScope.$on('getProcesses',getProcesses)
以防止这种双重 load()
,但我认为这是冗余,那么如何简单地调用控制器函数而不是 load()?或者如何实现这个简单的任务?使用指令?
查看:
<div ng-include src="'includes/overview-header.html'"></div>
<div ng-include src="'includes/process-info.html'"></div>
摘自 includes/overview-header.html :
<div class="col-md-12">
....
<h4><strong>currentPhase</strong></h4>
<p ng-controller="processoctrl">
<span class="label label-primary headerCurrentPhase" ng-bind="currentPhase"></span>
</p>
</div>
摘自 includes/process-info.html :
<tbody ng-controller="processctrl">
<tr ng-repeat="Process in Processes|orderBy:'ID'">
<td>{{Process.isCurrent}}</td>
<td>{{Process.isCurrent}}</td>
<td>{{Process.ID}}</td>
<td>{{Process.Title}}</a></td>
</tr>
</tbody>
processoctrl
(function (app) {
app.controller('processctrl', function ($scope, $rootScope, $routeParams, factorysvc) {
$scope.Processes = [];
$scope.currentPhase = null;
load();
//($scope.currentPhase || load())
function load() {
var promiseGet = factorysvc.getPsby($routeParams.itemId);
promiseGet.then(function (data) {
$scope.Processes = data;
$rootScope.root.empreendimento.currentPhase = $scope.currentPhase = data[0].currentPhase.Title;
}, function (err) {
$scope.Message = "Error " + err.status;
});
}
})}(angular.module('sgaapp')));
真的需要 2 个包含吗?
如果 overview-header 在视图之间共享,那么我们可以在 $rootScope 级别拥有 currentPhase 或拥有父级控制器并拥有它。
如果 overview-header 仅用于此视图,那么我们可以将两个 html 合并为一个,并在包装标签处设置 processctrl。
伙计,我没听懂你想做什么,但我想给你一些建议:
你的逻辑很复杂,你应该重新考虑一下,因为现在很烂;
包含在 angular 中也很糟糕。真的。你根本不应该使用它。如何避免?好吧,有两个选择。
- 首先是使用客户端路由(针对页面);与其使用内置路由,不如使用 ui-router。您将能够使用嵌套状态和路由;
- 其次是使用指令而不是包含。真的,想象一下 - 页眉或页脚都可以是指令,您只需在需要时将其包含在页面中即可。
对我来说 - 我同时使用第一个和第二个解决方案。
您应该避免在
$rootScope
中放置任何内容。也许它不会杀死你,有时它是唯一的解决方案,但是,你知道,这是一种不好的做法。如果你需要存储数据并在控制器之间共享,更好的选择是我们的工厂(或其他服务,但工厂最通用)。
示例:
app.factory('MyFactory', function () {
return {
myData: 'some default value',
someCommonFuction: function (a, b) {
return a + b;
}
};
});
除了数据存储,您还可以将工厂用作实用程序-class,具有常用功能