Angular.js的作用域和数据绑定

   2023-03-16 学习力0
核心提示:初识Angular.js通过初识Angular.js可以做一个简单的入门,下面开始做深入的了解吧。作用域作用域($scope)和应用的数据模型相关联的,同时作用域也是表达式执行的上下文。$scope对象是定义应用业务逻辑、控制器方法和视图属性的地方。 作用域是视图和控制器

初识Angular.js

通过初识Angular.js可以做一个简单的入门,下面开始做深入的了解吧。

作用域

作用域($scope)和应用的数据模型相关联的,同时作用域也是表达式执行的上下文。$scope对象是定义应用业务逻辑、控制器方法和视图属性的地方。 作用域是视图和控制器之间的胶水。在应用将视图渲染并呈献给用户之前,视图中的模板会和作用域进行连接,然后应用会对DOM进行设置以便将属性变化通知给AngularJS。

基于动态绑定,我们在修改视图数据时立刻更新$scope,而$scope发生变化时也会立刻渲染视图。

 

 <script type="text/javascript">

function loadController($scope) {
            $scope.name = "博客园";
            $scope.loadAgain = function () {
                $scope.name = "我的博客";
            };
        };
</script>

 <div ng-app>
        <div ng-controller="loadController">
            <input ng-model='name'/>
            <button ng-click="loadAgain()">
                切换</button>
            <hr />
            &ltspan ng:bind="name"&gt <span ng:bind="name"></span>
            <br />
            &ltspan ng_bind="name"&gt <span ng_bind="name"></span>
            <br />
            &ltspan data-ng-bind="name"&gt <span data-ng-bind="name"></span>
            <br />
            &ltspan x-ng-bind="name"&gt <span x-ng-bind="name"></span>
          </div>
</div>

  

上面的代码中,我们给一个 div 元素指定了一个loadController(控制器),那么div 元素之内,就是 loadController 这个函数运行时, $scope 这个注入资源的控制范围。

在这个控制范围内的html中,可以访问到$scope的变量:$scope.name,函数$scope.loadAgain。

数据绑定和模板

前面已经讲过了,在页面作用域范围内可以通过ng-model、ng-bind等之类的指令来绑定变量。

其实还可以使用{{name}}来完成数据绑定。

说说模板吧,模板的绑定有三种:

1.页面内直接写html代码(前面的数据绑定就是了)

2.使用script标签自定义模板,如下

<script type="text/javascript">
        function tablelist($scope) {
            $scope.userlist = [{ name: "张三", age: "23" }, { name: "李四", age: "25"}]
        };
 </script>

<script type="text/ng-template" >
                    <table ng-controller="tablelist">
                        <tr>
                            <th>
                                姓名
                            </th>
                            <th>
                                年龄
                            </th>
                        </tr>
                        <tr ng-repeat="app in userlist">
                            <td>
                                {{app.name}}
                            </td>
                            <td>
                                {{app.age}}
                            </td>
                        </tr>
                     </table>
</script>
  
<div ng-include src="'tpl'"></div>

3.引用外部文件

新建test.html模板页并清除所有代码,粘贴如下代码保存

<table ng-controller="tablelist">
    <tr>
        <th>
            姓名
        </th>
        <th>
            年龄
        </th>
    </tr>
    <tr ng-repeat="app in userlist">
        <td>
            {{app.name}}
        </td>
        <td>
            {{app.age}}
        </td>
    </tr>
</table>

当前页直接引用test.html,<div ng-include src="'test.html'"></div>

效果都是一样的:

Angular.js的作用域和数据绑定

 

模板引用中用到了 ng-include,还有渲染指令 ng-repeat把对象数组循环渲染到了页面,ng-repeat还提供了几个可使用的变量:

     $index 当前索引

     $first 是否为头元素

     $middle 是否为非头非尾元素

     $last 是否为尾元素

前段时间项目比较紧,一直没有更新。现在也正准备换工作了,离开这有些不舍啊。

 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • Angular 4 设置组件样式的几种方式
    Angular 4 设置组件样式的几种方式
      你用Angular吗?一.介绍  如何只改动最简单的css代码,呈现完全不一样的视图效果。第一种:最基本的设置:  图1 代码 图2 界面运行效果图平常,想给一个label或者p等标签添加样式,我们就是这样操作,在Angular中也是一样的。现在,如果我想要将字体换
    03-16
  • angularJSapi学习-angular.copy使用
    angular.copy使用效果:初始状态:输入信息后未保存状态:点击save后状态:当输入框内容和master内容不一致时:点击reset使得user的信息被重置为master中信息: 具体代码: 1 !DOCTYPE HTML 2 html ng-app="app" 3 headscript src="./angular.min.js"/script
    03-16
  • Ionic启动时提示:The Angular CLI requires a minimum Node.js version of eithor v10.13 or v12.0
    Ionic启动时提示:The Angular CLI requires a m
    在新建ionic项目后通过ionic serve 启动ionic项目时提示:The Angular CLI requires a minimum Node.js version of eithor v10.13 or v12.0  注:博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书、教程推送与
    03-16
  • Angular.js之内置过滤器学习笔记 javascript过
    !DOCTYPE htmlhtml lang="en"headmeta charset="UTF-8"titleangularFilter/titlescript src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"/script/head  body ng-app="angularJS" ng-controller="ctrl"    div{{
    03-08
  • Angular 隨記
    Windows下更新Node 和NPM方法管理員模式打開powershell執行以下命令:Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Forcenpm install -g npm-windows-upgradenpm-windows-upgrade
    03-08
  • 双向数据绑定(angular,vue) 双向数据绑定指令
    最近github上插件项目更新了关于双向数据绑定的实现方式,关于angular和vue.angular众所周知是使用的脏检查($dirty)。一开始大家会认为angular开启了类似setInterval去不停的循环检查,性能极差,但其实并不是,$dirty是在一定条件下才会去执行,比如输入框
    03-08
  • 六、angular 生成二维码
    六、angular 生成二维码
    首先需要安装angular-qrcode :bower install monospaced/angular-qrcodenpm install angular-qrcode如何使用?在相应的需要使用二维码的页面增加如下代码:注意:这里的“version”和"size"可以根据github上面找出自己想要的结果:生成含有图片的二维码:这里
    03-08
  • angular.js简单入门。 angular入门教程
    angular.js简单入门。 angular入门教程
    小弟刚接触angular js  就写了一个简单的入门。后续慢慢补。。。首先看 html 页面。htmlmeta charset="UTF-8"headtitleangularJS/title/headscript type="text/javascript" src="./js/angular.min.js"/script      //引入 angularJSscript type="text/
    03-08
  • angular.js使用ui-router注入报错,这里是版本
     报错如下:common.ts:604Uncaught SyntaxError: Unexpected token ) stateEvents.ts:211Uncaught SyntaxError: Unexpected token ) jquery.js:3827 Uncaught Error: [$injector:modulerr] Failed to instantiate module salesApp due to: Error: [$injector
    03-08
点击排行