控制器之间angularjs共享数据配置 [英] angularjs share data config between controllers
问题描述
我不知道什么可以分享指令的好方法
控制器之间。
我有即两条指令在不同的控制器使用
不同的配置第一个想到我想到的
使用这样的：
// HTML
＆LT;车身数据-NG-控制器=MainCtrl＆GT;
＆LT; DIV CLASS =容器＆GT;
＆LT; DIV数据UI的视图＆gt;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;// JS
.controller（'MainCtrl'，函数（$范围，$上传）{
/ *文件上传配置* /
$ scope.onFileSelect =功能（$文件）{
对于（VAR I = 0; I＆LT; $ files.length;我++）{
var文件= $文件[I]
$ scope.upload = $ upload.upload（{
网址：'服务器/上传/ URL，
方法：POST，
数据：{MyObj中：$ scope.myModelObj}，
文件：文件，
}）。进度（功能（EVT）{
的console.log（'百分比：'+ parseInt函数（100.0 * evt.loaded / evt.total））;
}）。成功（功能（数据，状态，头，配置）{ 的console.log（数据）;
}）; }
};
/ *日期选择器配置* /
$ scope.showWeeks = TRUE;
$ scope.minDate =新的日期（）;
$ scope.open =功能（$事件）{
。$事件preventDefault（）;
$ event.stopPropagation（）;
$ scope.opened = TRUE;
};
$ scope.dateOptions = {
今年格式：'YY'，
出发日：1
};
$ scope.format ='MMM D，YYYY;
}）
.controller（'IndexCtrl'，函数（$范围）{}）
这样我可以使用所有的功能在我的孩子控制器
但我不喜欢，因为碰撞的问题非常多。
由于不能使用服务（不能使用在服务范围$）的其他替代品可以做出其他的指令或将code在运行块
但它使用的是父控制器所以是完全一样
你认为怎么样？
更新
你怎么看待这种做法？
//角STAUFF之外
功能MyTest的（）{
this.testScope =功能（）{
的console.log（它的工作原理'）;
}
}//一个控制器内
$ scope.ns =新MyTest的（）;//视图
＆LT; p NG点击=ns.testScope（）＆GT; PPP＆LT; / P＆GT;
RIUPDATE
这似乎是最好的选择：）
MyTest.call（$范围内）;
考虑这篇文章介绍的方法：A HREF <=http://digital-drive.com/?p=188相对=nofollow >扩展AngularJS控制器使用混入模式
而不是复制你的方法出了服务的，从岗位创建一个包含这些方法基本控制器，然后调用你的派生控制器扩展到它们混合例如：
函数AnimalController（$范围，发声，颜色，runSpeed）{ VAR _this =这一点; //混入实例属性。
this.vocalization =发声;
this.runSpeed = runSpeed; //混入实例方法。
this.vocalize =功能（）{
的console.log（this.vocalization）;
}; //混入作用域属性。
$ scope.color =颜色; //混入范围的方法。
$ scope.run =功能（）{
的console.log（运行速度：+ _this.runSpeed）;
};
}
现在我们可以混入AnimalController到DogController：
函数DogController（$范围）{ VAR _this =这一点; //混入动物功能集成到狗。
angular.extend（这一点，新AnimalController（$范围，'汪汪汪汪！，纯黑色，35英里每小时'））; $ scope.bark =功能（）{
_this.vocalize（）; //从混入继承。
}
}
然后在我们的模板中使用DogController：
＆lt;节NG控制器=DogController＆GT;
＆所述p为H.;狗和下; / P＆GT; ！＆LT; - scope属性混入，显示：颜色：纯黑色 - ＆GT;
＆LT; p NG绑定模板=COLOR：{{颜色}}＆GT;＆LT; / P＆GT; ！＆LT; - 调用一个实例方法混入，输出：汪汪汪汪！ - ＆GT;
＆LT;按钮类=BTNNG点击=树皮（）＆GT;树皮狗＆LT; /按钮＆GT; ！＆LT; - 范围的方法混入，输出：'运行速度：35英里每小时 - ＆GT;
＆LT;按钮类=BTNNG点击=run（）的＆gt;运行狗＆LT; /按钮＆GT;
＆LT; /节＆gt;
本例中的控制器都在全球空间并且被包括在标记如下：
＆LT;脚本类型=文/ JavaScript的SRC =LIB / jquery.js和＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =LIB / angular.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =应用程序/控制器/动物controller.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =应用程序/控制器/狗controller.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =应用程序/控制器/ CAT-controller.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =应用程序/ app.js＆GT;＆LT; / SCRIPT＆GT;
我没有测试过，但我不明白为什么以下是行不通的：
VAR对myApp = angular.module（'对myApp'，[]）.controller（'AnimalController'，['$范围，发声，色彩，runSpeed'，函数（$范围，发声，颜色，runSpeed）{/ *控制器code这里* /}]） ;.controller（'DogController'，['$范围，$控制器，函数（$范围，$控制器）{
VAR _this =这一点; //混入动物功能集成到狗。
angular.extend（这一点，$控制器（'AnimalController'，{
$适用范围：适用范围，
发声：汪汪汪汪！，
颜色：纯黑色，
runSpeed：35英里每小时
}））; $ scope.bark =功能（）{
_this.vocalize（）; //从混入继承。
}
}]）;
请参阅：文档为$控制器服务
I'm wondering what could be a good way to share directive between controller. I've got ie two directives to use in different controller with different configuration the first think I thought of using like:
//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.total));
}).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) {
})
doing so I can use all the functions in my children controller but I don't like very much because of collision problems. Since you cannot use a service (you can't use $scope in a service) the other alternatives could be make an other directive or put the code in a run block but it's quite the same using a parent controller so what do you think about ?
UPDATE
what do you think about this approach ?
//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 this seems the best option :)
MyTest.call($scope);
Consider the method described by this post: Extending AngularJS Controllers Using the Mixin Pattern
Instead of copying your methods out of a service, create a base controller that contains those methods, and then call extend on your derived controllers to mix them in. The example from the post:
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 );
};
}
Now we can mixin AnimalController into 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.
}
}
And then use DogController in our template:
<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>
The controllers in this example are all in the global space and are included in the markup as follows.
<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>
I haven't tested it, but I don't see why the following wouldn't work:
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.
}
}]);
see: docs for $controller service
这篇关于控制器之间angularjs共享数据配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
