详解AngularJS中的作用域
范围扮演其视图连接控制器的角色一个特殊的JavaScript对象。范围包含了模型数据。在控制器，模型数据通过$scope对象访问。
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});
</script>
以下是在上面的例子中需要考虑的重要问题。
- $scope被作为第一个参数在其构造器确定指标到控制器。
- $scope.message 和 $scope.type 是它们在HTML页面中所用的模型。
- 我们已经设置模型的值将反映应用程序模块的控制器shapeController中。
- 我们可以在$scope定义函数功能。
继承范围
范围是特定的控制器。如果我们定义嵌套的控制器，然后控制器子将继承其父控制的范围。
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});
mainApp.controller("circleController", function($scope) {
$scope.message = "In circle controller";
});
</script>
以下是在上面的例子中需要考虑的重要问题。
- 我们在shapeController设定模型的值。
- 我们覆盖的子控制器circleController消息。当“消息”内的控制器circleController的模块使用时，将用于重写的消息。
例子
下面的例子将展示上述所有指令。
testAngularJS.html
<html>
<head>
<title>Angular JS Forms</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="shapeController">
<p>{{message}} <br/> {{type}} </p>
<div ng-controller="circleController">
<p>{{message}} <br/> {{type}} </p>
</div>
<div ng-controller="squareController">
<p>{{message}} <br/> {{type}} </p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});
mainApp.controller("circleController", function($scope) {
$scope.message = "In circle controller";
});
mainApp.controller("squareController", function($scope) {
$scope.message = "In square controller";
$scope.type = "Square";
});
</script>
</body>
</html>
结果
在Web浏览器打开textAngularJS.html。看到结果如下。
-
本文向大家介绍Angularjs中使用Filters详解，包括了Angularjs中使用Filters详解的使用技巧和注意事项，需要的朋友参考一下 Filter作用就是接收一个输入，通过某个规则进行处理，然后给用户返回处理后的结果。Filter可以用在模板、控制器、或者服务，同时也会很容易自定义一个Filter过滤器。 在模板中使用Filter Filter可以用于在视图模板中使用一下语法表达式：
-
本文向大家介绍AngularJS中transclude用法详解，包括了AngularJS中transclude用法详解的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了AngularJS中transclude用法。分享给大家供大家参考，具体如下： Transclude - 在Angular的指令中，大家会看到有一个这样的一个配置属性，这个单词在英文字典里面也查询不到真实的意思，所以就用英文来
-
本文向大家介绍AngularJS 工作原理详解，包括了AngularJS 工作原理详解的使用技巧和注意事项，需要的朋友参考一下 个人觉得，要很好的理解AngularJS的运行机制，才能尽可能避免掉到坑里面去。在这篇文章中，我将根据网上的资料和自己的理解对AngularJS的在启动后，每一步都做了些什么，做一个比较清楚详细的解析。 首先上一小段代码（index.html），结合代码我们来
-
本文向大家介绍详解AngularJS中的表格使用，包括了详解AngularJS中的表格使用的使用技巧和注意事项，需要的朋友参考一下 表格数据本质上通常是重复的。ng-repeat指令，可以用来方便地绘制表格。下面的示例说明使用ng-repeat指令来绘制表格。 表格可以使用CSS样式设置样式，如下： 例子 下面的例子将展示上述所有指令。 testAngularJS.html 输出 在Web浏览器
-
本文向大家介绍angularjs中ng-attr的用法详解，包括了angularjs中ng-attr的用法详解的使用技巧和注意事项，需要的朋友参考一下 前言 html中的属性很多，同样可以使用angularjs来定义： ng-attr-(suffix)=只能使用变量定义 ng-bind中使用字符可以将文字显示出来 用法实例代码： 总结 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工
-
本文向大家介绍AngularJS 作用域详解及示例代码，包括了AngularJS 作用域详解及示例代码的使用技巧和注意事项，需要的朋友参考一下 范围扮演其视图连接控制器的角色一个特殊的JavaScript对象。范围包含了模型数据。在控制器，模型数据通过$scope对象访问。 以下是在上面的例子中需要考虑的重要问题。 $scope被作为第一个参数在其构造器确定指标到控制器。 $scope.messa