脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → AngularJS控制器controller给模型数据赋初始值

AngularJS控制器controller给模型数据赋初始值的方法

 更新时间：2017年01月04日 10:38:40   作者：aitangyong  
这篇文章主要介绍了AngularJS控制器controller给模型数据赋初始值的方法,涉及AngularJS控制器controller简单赋值操作实现技巧,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • Angular实现响应式表单

    Angular实现响应式表单

    本篇文章主要介绍了Angular实现响应式表单，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Angularjs中date过滤器失效的问题及解决方法

    Angularjs中date过滤器失效的问题及解决方法

    这篇文章主要介绍了Angularjs中date过滤器失效的问题及解决方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-07-07
  • 手动初始化Angular的模块与控制器

    手动初始化Angular的模块与控制器

    本文主要介绍了手动初始化Angular的模块与控制器的方法，具有一定的参考价值，下面跟着小编一起来看下吧
    2016-12-12
  • angularjs之$timeout指令详解

    angularjs之$timeout指令详解

    本篇文章主要主要介绍了angularjs之$timeout指令详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 对angularJs中2种自定义服务的实例讲解

    对angularJs中2种自定义服务的实例讲解

    今天小编就为大家分享一篇对angularJs中2种自定义服务的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Angular刷新当前页面的实现方法

    Angular刷新当前页面的实现方法

    这篇文章主要介绍了Angular刷新当前页面的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 基于AngularJS的简单使用详解

    基于AngularJS的简单使用详解

    下面小编就为大家带来一篇基于AngularJS的简单使用详解。小编觉得挺不错的，现在就想给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • AngularJS实现页面跳转后自动弹出对话框实例代码

    AngularJS实现页面跳转后自动弹出对话框实例代码

    这篇文章主要介绍了AngularJS实现页面跳转后自动弹出对话框实例代码，然后在文章下面给大家介绍了angularjs页面加载后自动弹窗的实例代码，感兴趣的朋友参考下吧
    2017-08-08
  • 使用Angular 6创建各种动画效果的方法

    使用Angular 6创建各种动画效果的方法

    Angular能够让我们创建出具有原生表现效果的动画。我们将通过本文学习到如何使用Angular 6来创建各种动画效果。在此，我们将使用Visual Studio Code来进行示例演示。感兴趣的朋友跟随小编一起看看吧
    2018-10-10
  • AngularJS点击添加样式、点击变色设置的实例代码

    AngularJS点击添加样式、点击变色设置的实例代码

    本篇文章主要介绍了AngularJS点击添加样式、点击变色设置的实例代码，具有一定的参考价值，有兴趣的可以了解一下
    2017-07-07

最新评论