AngularJS第二课（指令，作用域，控制器）

来源：互联网发布：耳机知乎编辑：程序博客网时间：2024/05/21 10:16

指令

实列：

<div ng-init="firstName='pp'">    name:<input type="text" ng-model="firstName"></input>    您输入的是：{{firstName}}</div>

ng-init:作用是初始化数据ng-model：将把输入域（也就是input）的值，绑定到应用程序（也就是｛｛firstName｝｝）

no-repeat实现数组

<div ng-init="names=[1,2,3,4]">  <ul>    <li ng-repeat="x in names">      {{ x }}    </li>  </ul></div>

angularJS的MVC实现

实例：

//指定应用程序为myApp，以及控制器myCtrl<div ng-app="myApp" ng-controller="myCtrl"><h1>{{carname}}</h1></div>//实现V（视图）与C（控制器：就是操纵的js代码）分离<script>//声明一个采用angular的M（模型）var app = angular.module('myApp', []);//函数中传递$scope为参数的对象app.controller('myCtrl', function($scope) {    $scope.carname = "Volvo";});</script>

MVC：M（当前视图中可用的数据），V（视图，HTML），C（js代码,用来添加或者修改属性等操作，所以叫做控制器）

scope:带有属性和方法的模型，当你修改了HTML的部分，模型和控制器的部分也会自动更新。

scope的作用范围

实列：

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl"><h1>姓氏为 {{firstname}} 家族成员:</h1><ul>    <li ng-repeat="x in names"> {{firstname}}{{x}}</li></ul></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope, $rootScope) {    $scope.names = ["一", "二", "三"];    $rootScope.lastname = "张";});</script></body></html>

结果为张一，张二，张三

阅读全文

0 0