码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS学习2-指令(directive)/控制器(controller)/作用域(scope)

时间:2018-07-15 21:15:40      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:控制   业务逻辑   first   循环   ctr   app   没有   报错   很多   

ng-app  angular的根元素,从这里开始编译DOM

ng-model 声明变量,并将元素的值绑定到这个变量中

 

遍历  ng-repeat

一般用在列表和下拉菜单

<div ng-app="" ng-init="names=[‘Jani‘,‘Hege‘,‘Kai‘]">
  <p>使用 ng-repeat 来循环数组</p>
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

 

自定义指令

 

看来angular是全局变量

  <body>
    
    <div ng-app="app">

        <!-- 调用方法1 -->
        <say-hello></say-hello>

    </div>

    <script>

        // 获取到app实例
        var app = angular.module("app",[]);
        
        //添加say指令
        app.directive("sayHello",()=>{
            return {
                //一定要template,直接返回字符串不行
                template : "<h1>Hello World!</h1>"
            };
        });

    </script>


  </body>

 

控制器controller,里面写的是页面的业务逻辑

 

技术分享图片

变量名一定要驼峰,不然会解析错误的

技术分享图片

其实ide也报错了

 

很多坑,如果有某些地方漏了,整个模板都会不起作用。。

<body>

    <!-- 这里必须指定要使用的controller名字 -->
    <div ng-app="app" ng-controller="myCtrl">

        <!-- <input>标签代表输入框 -->
        <input type="text" ng-model="firstName"><br>
        <input type="text" ng-model="lastName"><br>

        <!-- 不能直接用变量fullName,因为没有办法直接声明,只能用函数 -->
        <div>
            {{fullName()}}
        </div>
        

    </div>


    <script>
        var app = angular.module(‘app‘,[]);

        app.controller(‘myCtrl‘,($scope)=>{
            $scope.firstName = "hello";
            $scope.lastName = "world";

            //声明函数,注意不要加()
            $scope.fullName = ()=>{
                return $scope.firstName+" "+$scope.lastName;
            }
        });
        
    </script>


</body>

技术分享图片

 

外部文件中的控制器

和js一样,肯定是要分开文件写的,只需要在script标签里面引入js即可,其他写法/使用方法一样

<script src="personController.js"></script>

 

作用域scope

scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用

1、在控制器中,作为参数,上面有例子了。

2、在控制器给scope添加对象,view可以拿到。使用不需要$scope前缀

3、在view使用ng-model给scope添加对象,控制器可以拿到。控制器使用需要$scope前缀

 

 

根作用域

是各个controller里面的scope的桥梁

遍历数组的时候,需要一个常量的时候。当然也可以直接用常量

<ul>
    <li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>

app.controller(‘myCtrl‘, function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});

 

AngularJS学习2-指令(directive)/控制器(controller)/作用域(scope)

标签:控制   业务逻辑   first   循环   ctr   app   没有   报错   很多   

原文地址:https://www.cnblogs.com/weizhibin1996/p/9314457.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!