AngularJS控制器controller给模型数据赋初始值的方法  更新时间:2017年01月04日 10:38:40   作者:aitangyong   这篇文章主要介绍了AngularJS控制器controller给模型数据赋初始值的方法,涉及AngularJS控制器controller简单赋值操作实现技巧,需要的朋友可以参考下 本文实例讲述了AngularJS控制器controller给模型数据赋初始值的方法。分享给大家供大家参考,具体如下: 之前的文章《AngularJS入门示例之Hello World详解》,很简单的就实现了模型数据和页面显示的自动绑定。现在我们使用控制器,给模型赋初始值。如果使用jQuery来实现变量赋初值,需要在页面加载完成后执行 $(“#target”).attr(“value”,selfValue); 使用AngularJS代码如下: Hello,World! Hello, {{yourName}} 这里需要注意:函数名必须与ng-controller中的名称一致,函数的参数$scope名次也是固定的,不能随便修改。这样的话,AngularJS框架会自动执行我们的控制器,并将作用域对象注入到函数参数。很显然这种方式非常不好,因为不能改变函数参数名,后面我会看到还有别的方式来达到同样的目的,后续我们再继续学习。可以看到Controller就是一个JavaScript 函数,在 Angular 里,当这个函数通过 ng-controller 指令绑定到 DOM 上的时候,这个函数就是 Controller 了,我们可以为 Controller Scope 对象。 更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》 希望本文所述对大家AngularJS程序设计有所帮助。 您可能感兴趣的文章: AngularJS控制器controller正确的通信的方法 AngularJs学习第五篇从Controller控制器谈谈$scope作用域 详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例 AngularJS 控制器 controller的详解 AngularJS利用Controller完成URL跳转 Angularjs中controller的三种写法分享 angularJS+requireJS实现controller及directive的按需加载示例 Angularjs的Controller间通信机制实例分析 AngularJS实现controller控制器间共享数据的方法示例 AngularJS 控制器 controller 相关文章 AngularJs中$cookies简单用法分析 这篇文章主要介绍了AngularJs中$cookies简单用法,结合实例形式分析了AngularJS使用$cookies存储变量相关操作技巧与注意事项,需要的朋友可以参考下 2019-05-05 AngularJS基础 ng-mouseover 指令简单示例 本文主要介绍AngularJS ng-mouseover 指令,这里帮大家整理了AngularJS 指令的基础知识,并附代码示例,有兴趣的小伙伴可以参考下 2016-08-08 Angularjs 基础入门 这篇文章主要介绍了Angularjs 基础入门的一些知识,需要的朋友可以参考下 2014-12-12 AngularJs expression详解及简单示例 本文主要介绍AngularJs expression,这里整理了详细的资料,并附示例代码,有兴趣的小伙伴可以参考下 2016-09-09 AngularJS学习第一篇 AngularJS基础知识 这篇文章主要介绍了AngularJS学习第一篇,分享了有关AngularJS的基础知识,主要包括指令、过滤器等,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-02-02 Angular多选、全选、批量选择操作实例代码 列表批量选择是一个开发人员经常遇到的功能,列表批量选择的实现方式很多,这篇文章主要介绍了Angular多选、全选、批量选择实例代码,有兴趣的可以了解一下。 2017-03-03 angularJs中$http获取后台数据的实例讲解 今天小编就为大家分享一篇angularJs中$http获取后台数据的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-08-08 Angular2 NgModule 模块详解 这篇文章主要介绍了Angular2 NgModule 模块详解的相关资料,并附简单实例,需要的朋友可以参考下 2016-10-10 angular中的http拦截器Interceptors的实现 本篇文章主要介绍了angular中的http拦截器Interceptors的实现的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。 2017-02-02 AngularJS实践之使用NgModelController进行数据绑定 大家都知道AngularJS中的指令是其尤为复杂的一个部分,但是这也是其比较好玩的地方。这篇文章我们就来说一说如何在我们自定义的指令中,利用ngModel的controller来做双向数据绑定,本文对大家学习AngularJS具有一定的参考借鉴价值,有需要的朋友们可以参考借鉴。 2016-10-10 最新评论

本文实例讲述了AngularJS控制器controller给模型数据赋初始值的方法。分享给大家供大家参考,具体如下:

之前的文章《AngularJS入门示例之Hello World详解》,很简单的就实现了模型数据和页面显示的自动绑定。现在我们使用控制器,给模型赋初始值。如果使用jQuery来实现变量赋初值,需要在页面加载完成后执行

$("#target").attr("value",selfValue);

使用AngularJS代码如下:

<!doctype html>
<html lang="en" ng-app>
  <head>
    <meta charset="utf-8">
    <title>Hello,World!</title>
    <script src="angular1.2.25.js"></script>
    <script>
    function WholeController($scope)
    {
    $scope.yourName = "aty";
    }
    </script>
  </head>
  <body ng-controller="WholeController">
    <input type="text" ng-model="yourName">
    <h1>Hello, {{yourName}}</h1>
  </body>
</html>

这里需要注意:函数名必须与ng-controller中的名称一致,函数的参数$scope名次也是固定的,不能随便修改。这样的话,AngularJS框架会自动执行我们的控制器,并将作用域对象注入到函数参数。很显然这种方式非常不好,因为不能改变函数参数名,后面我会看到还有别的方式来达到同样的目的,后续我们再继续学习。可以看到Controller就是一个JavaScript 函数,在 Angular 里,当这个函数通过 ng-controller 指令绑定到 DOM 上的时候,这个函数就是 Controller 了,我们可以为 Controller Scope 对象。

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

您可能感兴趣的文章:

  • AngularJS控制器controller正确的通信的方法
  • AngularJs学习第五篇从Controller控制器谈谈$scope作用域
  • 详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
  • AngularJS 控制器 controller的详解
  • AngularJS利用Controller完成URL跳转
  • Angularjs中controller的三种写法分享
  • angularJS+requireJS实现controller及directive的按需加载示例
  • Angularjs的Controller间通信机制实例分析
  • AngularJS实现controller控制器间共享数据的方法示例
张贴在3