angularjs父子控制器中文社区控制器可不可以直接调用其它控制器里面的方法

为了账号安全,请及时绑定邮箱和手机
控制器中可以直接调用function/function.php中的M方法?
控制器中可以直接调用function/function.php中的M方法?
写下你的评论...
写下你的评论...
Copyright (C)
All Rights Reserved | 京ICP备 号-2详解AngularJS控制器的使用
作者:彼岸花在开
字体:[ ] 类型:转载 时间:
这篇文章主要为大家详细介绍了AngularJS控制器的使用方法,感兴趣的小伙伴们可以参考一下
控制器在Angularjs中的作用是增强视图,它实际就是一个函数,用来向视图中的作用域添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为。
当我们在页面上创建一个控制器时,Angularjs会生成并传递一个$scope给这个控制器,由于Angularjs会自动实例化控制器,所以我们只需要写构造函数即可。下面的例子展示了控制器初始化:
function my Controller($scope){
$scope.msg="hello,world!";
上面这个创建控制器的方法会污染全局命名空间,更合理的办法是创建一个模块,然后在模块中创建控制器,如下:
var myApp=angular.module("myApp",[]);
myApp.controller("myController",function($scope){
$scope.msg="hello,world!";
用内置指令ng-click可以将按钮、链接等其他任何DOM元素同点击事件进行绑定。ng-click指令将浏览器中的mouseup事件,同设置在DOM元素上的事件处理程序绑定在一起(例如,当浏览器在某个DOM元素上触发了点击事件,函数就会被调用)。和前面的例子类似,绑定看起来是这样的:
&div ng-controller="FirstController"&
&h4&The simplest adding machine ever&/h4&
&button ng-click="add(1)" class="button"&Add&/button&
&a ng-click="subtract(1)" class="button alert"&Subtract&/a&
&h4&Current count: {{ counter }}&/h4&
按钮和链接都被绑定在了内部$scope的一个操作上,当点击任何一个元素时AngularJS都会调用相应的方法。注意,当设置调用哪个函数时,会同时用括号传递一个参数(add(1))
app.controller('FirstController', function($scope) {
$scope.counter = 0;
$scope.add = function(amount) { $scope.counter += };
$scope.subtract = function(amount) { $scope.counter -= };
Angularjs与其他框架的最大区别在于,控制器并不适合来执行DOM操作、格式化或数据操作,以及除存储数据模型之外的状态维护操作,它只是视图和$scope之间的桥梁。
控制器嵌套(作用域包含作用域)
AngularJS应用的任何一个部分,无论它渲染在哪个上下文中,都有父级作用域存在。对于ng-app所处的层级来讲,它的父级作用域就是$rootScope。
默认情况下,AngularJS在当前作用域中无法找到某个属性时,便会在父级作用域中进行查找。如果AngularJS找不到对应的属性,会顺着父级作用域一直向上寻找,直到抵达$rootScope为止。如果在$rootScope中也找不到,程序会继续运行,但视图无法更新。
通过例子来看一下这个行为。创建一个ParentController,其中包含一个user对象,再创建一个ChildController来引用这个对象:
app.controller('ParentController', function($scope) {
$scope.person = {greeted: false};
app.controller('ChildController', function($scope) {
$scope.sayHello = function() {
$scope.person.name = 'Ari Lerner';
如果我们将ChildController置于ParentController内部,那ChildController的$scope对象的父级作用域就是ParentController的$scope对象。根据原型继承的机制,我们可以在子作用域中访问ParentController的$scope对象。
&div ng-controller="ParentController"&
&div ng-controller="ChildController"&
&a ng-click="sayHello()"&Say hello&/a&
{{ person }}
以上就是本文的全部内容,希望对大家的学习有所帮助,帮助大家熟悉AngularJS控制器。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具Laravel 控制器中如何调用其他方法_问答_ThinkSAAS
Laravel 控制器中如何调用其他方法
Laravel 控制器中如何调用其他方法
phpRoute::controller('user','UserController');
//UserController.php
///user/reg
function postReg(){
///user/login
function postLogin(){
//判断登陆密码
$this-& postReg();//把传递过来的参数去注册
当访问/user/login的时候如果木有注册,需要调用postReg方法注册,但是$this-&postReg()这是get方法,而且post来的参数也没法传递过去,请问怎么办?
用户去登录,你发现用户没有账号,自动帮忙注册,你家产品经理同意这个逻辑吗?万一用户提交的信息有误哩?比如密码搞错了。你还是得有个注册页面,让用户自己注册的。
在一个 Action 中请求另外一个 Action 这种做法不合理。当然也是可以做到的:
postReg 是一个 HTTP 请求地址,你可以在 postLogin 中模拟 HTTP 请求 postReg,比如使用 curl。
还有个做法比较合理,定义个方法或类createUser($data),这个方法在 postReg 中可以调用,也可以在 postLogin 调用,你想在哪里调都可以。验证注册信息的方法也可以放到那个类中。
其实你需要的就是代码复用。
添加你想要问的问题
PHP开发框架
开发工具/编程工具
服务器环境
ThinkSAAS商业授权:
ThinkSAAS为用户提供有偿个性定制开发服务
ThinkSAAS将为商业授权用户提供二次开发指导和技术支持
让ThinkSAAS更好,把建议拿来。
开发客服微信AngularJs-指令和控制器交互
  前段时间我们学习了angular的指令,他通过ECMA的方式创建元素,可以让我们共用这些元素,我们也知道可以通过 link的方法给这个指令添加一些动作事件,本节,我们将写入和让angular的指令能和控制器进行交互。
1,指令和控制器的交互
&!DOCTYPE html&
&html ng-app=&MyController&&
& & &meta charset=&utf-8&&
& & &title&指令复用&/title&
& & &div ng-controller=&MyCtrl&&
& & & & &loader&滑动加载&/loader&
& & &/div&
&script src=&js/angular-1.3.0.js&&&/script&
&script src=&js/directive-controller.js&&&/script&
上面的代码平淡无奇,有个控制器有个指令(loader),下面可以看到我们通过 directive创建了这个指令,并且我们通过link的方法给他赋值鼠标事件(mouseenter)。
var myModule = angular.module('MyController',[]);
myModule.controller('MyCtrl',function($scope){
& & $scope.loadData = function(){
& & & & console.log(&加载数据...&);
myModule.directive('loader',function(){
& & return{
& & & & restrict:'AE',
& & & & link:function(scope,element,attr){
& & & & & & element.bind('mouseenter',function(){
& & & & & & & & &scope.loadData();
& & & & & & })
我们来看看运行的结果,ok,我们打印出来 &加载数据...&。
2,多个控制器如何公用一个指令?
  我们创建指令的目的就是在于,能够复用它,当然这也是MVC的终极思想。
  我们的代码也发生了一些变化
&!DOCTYPE html&
&html ng-app=&MyController&&
& & &meta charset=&utf-8&&
& & &title&指令复用&/title&
& & &div ng-controller=&MyCtrl&&
& & & & &loader loadDataFn=&loadData()&&滑动加载&/loader&
& & &/div&
& & &div ng-controller=&MyCtr2&&
& & & & &loader loadDataFn=&loadData2()&&滑动加载2&/loader&
& & &/div&
&script src=&js/angular-1.3.0.js&&&/script&
&script src=&js/directive-controller.js&&&/script&
首先,我们创建了两个控制器 MyCtr1 和 MyCtr2,同时呢,我们给 loader 这个指令,加了一个自定义的属性叫 loadDataFn,给他赋的值是下面js中的两个对应控制器中的方法loadData()和loadData2();
var myModule = angular.module('MyController',[]);
myModule.controller('MyCtrl',function($scope){
& & $scope.loadData = function(){
& & & & console.log(&加载数据...&);
myModule.controller('MyCtr2',function($scope){
& & $scope.loadData2 = function(){
& & & & console.log(&加载数据2...&);
myModule.directive('loader',function(){
& & return{
& & & & restrict:'AE',
& & & & link:function(scope,element,attr){
& & & & & & element.bind('mouseenter',function(){
& & & & & & & & // scope.loadData();
& & & & & & & & // scope.$apply(&loadData()&);
& & & & & & & & scope.$apply(attr.loaddatafn);
& & & & & & })
当然,在指令的 link方法中我们也做了改变,link方法呢,给我提供了四个参数:scope、element、attr和父控制器。我们给元素绑定事件也是通过参数中的 element.bind()完成的,我们也可以通过 attr 属性获取指令上的属性,然后通过$apply的方法来完成调用就好了。在此要提交大家的是,我们在获取指令元素上的属性的时候,一定要注意,我们要把属性的名字写成小写的,这是angularJS的坑。
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'}

我要回帖

更多关于 angularjs父子控制器 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信