我想知道共享指令的好方法是什么控制器之间.我有两个指令可以在不同的控制器中使用第一个想到的配置不同使用喜欢:
//html<body data-ng-controller="MainCtrl"><div class="容器"><div data-ui-view></div>这样做我可以使用我的子控制器中的所有功能但我不是很喜欢，因为碰撞问题.由于您不能使用服务(您不能在服务中使用 $scope)，因此其他替代方法可以是创建其他指令或将代码放在运行块中但使用父控制器完全相同，所以你怎么看?
更新
您如何看待这种方法?
//角度线外函数 MyTest(){this.testScope = 函数(){console.log('它有效');}}//在控制器内部$scope.ns = new MyTest();//在视图中<p ng-click="ns.testScope()">ppp</p>更新这似乎是最好的选择:)
MyTest.call($scope);考虑这篇文章描述的方法:Extending AngularJS Controllers Using混合模式
不要从服务中复制您的方法，而是创建一个包含这些方法的基本控制器，然后在派生控制器上调用扩展以将它们混合.帖子中的示例:
function AnimalController($scope, 发声, 颜色, runSpeed) {var _this = this;//混合实例属性.this.vocalization = 发声；this.runSpeed = 运行速度；//混合实例方法.this.vocalize = 函数 () {console.log(this.vocalization);};//混合作用域属性.$scope.color = 颜色；//混合作用域方法.$scope.run = function(){console.log("运行速度:" + _this.runSpeed );};}现在我们可以将 AnimalController 混合到 DogController 中:
function DogController($scope) {var _this = this;//将动物功能混合到狗中.angular.extend(this, new AnimalController($scope, 'BARK BARK!', 'solid black', '35mph'));$scope.bark = 函数 () {_this.vocalize();//继承自 mixin.}}然后在我们的模板中使用 DogController:
<p>狗</p><!-- 范围属性混合，显示:'颜色:纯黑色'--><p ng-bind-template="color: {{ color }}"></p><!-- 调用一个实例方法 mixin，输出:'BARK BARK!'--><button class="btn" ng-click="bark()">Bark Dog</button><!-- Scope 方法混合，输出:'run speed: 35mph'--><button class="btn" ng-click="run()">跑狗</button></节> 本示例中的控制器都在全局空间中，并包含在如下标记中.
<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, voiceization, color, runSpeed) {/* 控制器代码在这里 */}]);.controller('DogController', ['$scope', '$controller', function($scope, $controller) {var _this = this;//将动物功能混合到狗中.angular.extend(this, $controller('AnimalController', {$范围:范围，发声:'BARK BARK！',颜色:纯黑色"，运行速度:'35mph'}));$scope.bark = 函数 () {_this.vocalize();//继承自 mixin.}}]);参见:$controller 服务的文档
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屋！
