AngularJs 功能（三）--数据绑定丶作用域

joywek 发布于2019-08-22 13:54 / 2542人阅读

摘要：功能数据绑定的双向数据绑定，一方面可以做到变化驱动了中元素变化，另一方面也可以做到元素的变化也会影响到。其次告诉，对页面上的这个进行双向数据绑定。第三告诉，在这个指令模版上显示这个的数据。作用域是一个把一个元素连结到上的对象。

功能 数据绑定

AngularJS的双向数据绑定，一方面可以做到model变化驱动了DOM中元素变化，另一方面也可以做到DOM元素的变化也会影响到Model。

在我们使用jQuery的时候，代码中会大量充斥类似这样的语句：

/获得TEXT.AREATEXT的值/
var textval = $("#text_id").attr("value");
//或者
var textval = $("#text_id").val();
/获取单选按钮的值/
var valradio = $("input@type=radio").val();
/获取一组名为(items)的radio被选中项的值/
var item = $("input@name=items").val();
/获取复选框的值/
var checkboxval = $("#checkbox_id").attr("value")；
/获取下拉列表的值/
var selectval = $("#select_id").val();
//文本框，文本区域：
$("#text_id").attr("value","");//清空内容
$("#text_id").attr("value","test");//填充内容
//多选框checkbox：
$("#chk_id").attr("checked","");//使其未勾选
$("#chk_id").attr("checked",true);//勾选
if($("#chk_id").attr("checked")==true) //判断是否已经选中
//单选组radio：
$("input[@type=radio]").attr("checked","2");//设置value=2的项目为当前选中项
//下拉框select：
$("#select_id").attr("value","test");//设置value=test的项目为当前选中项
$("").appendTo("#select_id")//添加下拉框的option
$("#select_id").empty()；//清空下拉框
获取一组名为(items)的radio被选中项的值
var item = $("input@name=items").val();//若未被选中 则val() = undefined
获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当前选中值
$("#select_id")[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$("input[@name=items]").get(1).checked = true;

即频繁的DOM操作（读取和写入），其实我们的最终目的并不是要操作DOM，而是要实现业务逻辑。angular的数据绑定将让你摆脱DOM操作，只要模板与数据通过声明进行了绑定，两者将随时保持同步，最新的数据会实时显示在页面中，页面中用户修改的数据也会实时被记录在数据模型中。

实例

从View到Controller再到View的数据交互：



……


Hello, {{ user.name }}！

……

关键： ng-app 、 ng-model 和 { {user.name } } 
首先： 元素的ng-app属性。标识这个DOM里面的内容将启用AngularJS应用。
其次：告诉AngularJS，对页面上的“user.name” 这个Model进行双向数据绑定。
第三：告诉AngularJS，在“{{ user.name}}”这个指令模版上显示“user.name”这个Model的数据。

从Server到Controller再到View的数据交互：



……



获取名字  

……

demoApp.controller("demoController", function($http, $scope){
$scope. getAjaxUser = function(){
$http.get({url:"../xxx.action"}).success(function(data){
$scope.user= data;
 });
$scope.user = {"name":"从JOSN中获取的名称","age":22};
};
});

改变$scope中的user，View也会自动更新。

作用域 scope

1>$scope
$scope是一个把view（一个DOM元素）连结到controller上的对象。在我们的MVC结构里，这个 $scope 将成为model，它提供一个绑定到DOM元素（以及其子元素）上的excecution context。
通俗一点$scope 实际上就是一个JavaScript对象，controller和view都可以访问它，所以我们可以利用它在两者间传递信息。在这个 $scope 对象里，我们既存储数据，又存储将要运行在view上的函数。

$scope是一个将view（一个DOM元素）连结到controller上的对象。每一个Angular应用都会有一个 $rootScope。这个 $rootScope 是最顶级的scope，它对应着含有 ng-app 指令属性的那个DOM元素。

$scope也是一个JavaScript对象，指向应用程序作用域内的所有HTML元素和执行上下文。

所有$scope都遵循原型继承，这意味着它们都能访问父$scope，也具有原型链那样的特性，即向上访问属性和方法，直到最顶层。

在ng-repeat、ng-switch、ng-view、ng-include都会创建一个新的子scope，所以问题经常在这些指令中出现。

在你的model中，带有「.」将会确认原型继承在起作用。所以使用

比

更好。

如果你真的想要（或需要）使用一个原始的方式，有两项工作：
在子scope中，使用$parent.parentScopeProperty。这将阻止子scope创建它自己的属性。
在父scope上创建一个方法，并且从子scope中调用它，传递原始值到父scope中（并不总是起作用）。

云服务器 GPU云服务器作用域中作用域作用域规则作用域实例

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92604.html

AngularJs功能（六）--指令

摘要：事件只针对输入框值的真实修改，而不是通过来修改。指令将给定表达式的值替换元素的内容。指令还有另外一种转换方式，如果你有字符串数组希望在输入框中显示，你可以在上使用指令。指令 Directive 指令系统（Directive）是Angular应用的一个重要特性。是通过对DOM元素的标签丶属性来增强HTML表现力，为其增加一些特定功能。本篇参考文档Angular菜鸟教程内置指令这里...

Mertens 2019-08-22 13:59 评论0 收藏0
【译】《精通使用AngularJS开发Web App》（三）--- 深入scope，继承结构，事件系

摘要：比如，我们可以监听事件由实例发出，然后在任何浏览器中就是变化的时候都会得到通知，如下所示每一个作用域对象都会有这个方法，可以用来注册一个作用域事件的侦听器。这个函数所扮演的侦听器在被调用时会有一个对象作为第一个参数。上一篇：【译】《精通使用AngularJS开发Web App》（二）下一篇：【译】《精通使用AngularJS开发Web App》（四）书名：Mastering W...

wind5o 2019-08-19 14:26 评论0 收藏0
angularJS directive用法详解

摘要：可选参数，布尔值或者对象默认值为，可能取值默认值。布尔值或者字符，默认值为这个配置选项可以让我们提取包含在指令那个元素里面的内容，再将它放置在指令模板的特定位置。前言最近学习了下angularjs指令的相关知识，也参考了前人的一些文章，在此总结下。欢迎批评指出错误的地方。 Angularjs指令定义的API showImg(https://segmentfault.com/img...

hlcc 2019-08-20 11:09 评论0 收藏0
【译】《精通使用AngularJS开发Web App》（二） --- 框架概览，双向数据绑定，MVC

摘要：本书的这一部分将为随后的章节打下基础，会涵盖模板，模块化，和依赖注入。本书的小例子中我们会使用未经压缩的，开发友好的版本，在的上。作用域也可以针对特定的视图来扩展数据和特定的功能。上一篇：【译】《精通使用AngularJS开发Web App》（一）下一篇：【译】《精通使用AngularJS开发Web App》（三）原版书名：Mastering Web Application D...

geekidentity 2019-08-19 14:26 评论0 收藏0