当前位置： 移动技术网 > IT编程>开发语言>JavaScript > AngularJS无作用域控制器实例讲解

AngularJS无作用域控制器实例讲解

2019年03月29日  | 移动技术网IT编程  | 我要评论

无作用域的控制器

使用前提：作用域不复杂、无需继承、无需控制器间通信。

如下就是一个无作用域控制器：

<!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. 使用控制器中数据时：<数据名>.<控制器中变量>

end

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网