AngularJS无作用域控制器实例讲解
程序员文章站
2023-08-29 18:03:15
无作用域的控制器
使用前提：作用域不复杂、无需继承、无需控制器间通信。
如下就是一个无作用域控制器：
无作用域的控制器
使用前提：作用域不复杂、无需继承、无需控制器间通信。
如下就是一个无作用域控制器：
<!doctype html>
<html ng-app="exampleapp">
<head>
<title>controllers</title>
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<link href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script>
var app = angular.module("exampleapp", [])
.controller("simplectrl", function () {
this.datavalue = "hello, adam";
this.reversetext = function () {
this.datavalue = this.datavalue.split("").reverse().join("");
}
});
</script>
</head>
<body>
<p class="well" ng-controller="simplectrl as ctrl">
<h4>top level controller</h4>
<p class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button"
ng-click="ctrl.reversetext()">reverse</button>
</span>
<input class="form-control" ng-model="ctrl.datavalue">
</p>
</p>
</body>
</html>
你可能已经发现了它和一般控制器之间的区别
1. 未对$scope造成依赖，而是用js的this关键字定义了自己的数据
2. 视图中访问时，需用如下方式访问<要应用的控制器> as <变量名>
3. 使用控制器中数据时：<数据名>.<控制器中变量>