大佬教程收集整理的这篇文章主要介绍了angularjs在控制器之间共享数据配置,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
考虑一下本文描述的方法:使用mixin模式扩展AngularJS控制器
不要将方法从服务中复制出来,而是创建一个包含这些方法的基本控制器,然后在派生的控制器上调用extend来将它们混合使用。
function AnimalController($scope, vocalization, color, runSpeed) {
var _this = this;
// mixin instance propertIEs.
this.vocalization = vocalization;
this.runSpeed = runSpeed;
// mixin instance methods.
this.vocalize = function () {
console.log(this.vocalization);
};
// mixin scope propertIEs.
$scope.color = color;
// mixin scope methods.
$scope.run = function(){
console.log("run speed: " + _this.runSpeed );
};
}
现在我们可以将AnimalController混入DogController中:
function DogController($scopE) {
var _this = this;
// mixin Animal functionality into Dog.
angular.extend(this, new AnimalController($scope, 'barK barK!', 'solID black', '35mph'));
$scope.bark = function () {
_this.vocalize(); // inherited from mixin.
}
}
然后在我们的模板中使用DogController:
<section ng-controller="DogController">
<p>Dog</p>
<!-- Scope property mixin, displays: 'color: solID black' -->
<p ng-bind-template="color: {{ color }}"></p>
<!-- Calls an instance method mixin, outputs: 'barK barK!' -->
<button class="btn" ng-click="bark()">bark Dog</button>
<!-- Scope method mixin, outputs: 'run speed: 35mph' -->
<button class="btn" ng-click="run()">Run Dog</button>
</section>
此示例中的控制器全部位于全局空间中,并包含在标记中,如下所示。
<script type="text/JavaScript" src="lib/jquery.Js"></script>
<script type="text/JavaScript" src="lib/angular.Js"></script>
<script type="text/JavaScript" src="app/controllers/animal-controller.Js"></script>
<script type="text/JavaScript" src="app/controllers/dog-controller.Js"></script>
<script type="text/JavaScript" src="app/controllers/cat-controller.Js"></script>
<script type="text/JavaScript" src="app/app.Js"></script>
我还没有测试过,但是我不明白为什么下面的方法不起作用:
var myApp = angular.module('myApp', [])
.controller('AnimalController', ['$scope', 'vocalization', 'color', 'runSpeed', function ($scope, vocalization, color, runSpeed) { /* controller code here */}]);
.controller('DogController', ['$scope', '$controller', function($scope, $controller) {
var _this = this;
// mixin Animal functionality into Dog.
angular.extend(this, $controller('AnimalController', {
$scope: scope,
vocalization: 'barK barK!',
color: 'solID black',
runSpeed:'35mph'
}));
$scope.bark = function () {
_this.vocalize(); // inherited from mixin.
}
}]);
请参阅:$ controller服务的文档
我想知道什么是在控制器之间共享指令的好方法。我有两个指令要在具有不同配置的不同控制器中使用,首先想到的是我想到的使用方法:
//html
<body data-ng-controller="MainCtrl">
<div class="container">
<div data-ui-view></div>
</div>
</body>
//js
.controller('MainCtrl',function ($scope,$upload) {
/*File upload config*/
$scope.onFileSELEct = function($files) {
for (var i = 0; i < $files.length; i++) {
var file = $files[i];
$scope.upload = $upload.upload({
url: 'server/upload/url',method: 'POST',data: {myObj: $scope.mymodelObj},file: file,}).progress(function(evt) {
console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.@R_799_10586@l));
}).success(function(data,status,headers,config) {
console.log(data);
});
}
};
/* Datepicker config */
$scope.showWeeks = true;
$scope.minDate = new Date();
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
'year-format': "'yy'",'starTing-day': 1
};
$scope.format = 'MMM d,yyyy';
})
.controller('IndexCtrl',function ($scope) {
})
这样,我可以使用子控制器中的所有功能,但是由于碰撞问题,我不太喜欢。由于您不能使用服务(不能在服务中使用$
scope),其他选择可以是其他指令或将代码放入运行块,但使用父控制器则完全相同,因此您怎么看? ?
更新
您如何看待这种方法?
//outside of angular stauff
function myTest(){
this.testScope = function(){
console.log('It works');
}
}
//inside a controller
$scope.ns = new myTest();
//in the view
<p ng-click="ns.testScope()">ppp</p>
RIupdatE这似乎是最好的选择:)
myTest.call($scopE);
以上是大佬教程为你收集整理的angularjs在控制器之间共享数据配置全部内容,希望文章能够帮你解决angularjs在控制器之间共享数据配置所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。