AngularJS学习之旅—AngularJS Scope作用域(五)

? ? ? ? ?

<div class="cnblogs_code">

<span style="color: #0000ff"><<span style="color: #800000">head<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">meta <span style="color: #ff0000">charset<span style="color: #0000ff">="utf-8"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">script <span style="color: #ff0000">src<span style="color: #0000ff">="js/angular.min.js"<span style="color: #0000ff">></<span style="color: #800000">script<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">head<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">body<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">ng-app<span style="color: #0000ff">="myApp"<span style="color: #ff0000"> ng-controller<span style="color: #0000ff">="myCtrl"<span style="color: #0000ff">>

<span style="color: #008000">

<span style="color: #0000ff"><<span style="color: #800000">input <span style="color: #ff0000">ng-model<span style="color: #0000ff">="name"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">h1<span style="color: #0000ff">>{{greeting}}<span style="color: #0000ff"></<span style="color: #800000">h1<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">button <span style="color: #ff0000">ng-click<span style="color: #0000ff">='sayHello()'<span style="color: #0000ff">>点我<span style="color: #0000ff"></<span style="color: #800000">button<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">p<span style="color: #0000ff">>当你修改输入框中的值时，会影响到模型(model),当然也会影响到控制器对应的属性值。<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>

<span style="color: #008000">

<span style="color: #0000ff"><<span style="color: #800000">ul<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">li <span style="color: #ff0000">ng-repeat<span style="color: #0000ff">="x in names"<span style="color: #0000ff">>{{x}}<span style="color: #0000ff"></<span style="color: #800000">li<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">ul<span style="color: #0000ff">>

<span style="color: #008000">

<span style="color: #0000ff"><<span style="color: #800000">ul<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">li <span style="color: #ff0000">ng-repeat<span style="color: #0000ff">="x in names"<span style="color: #0000ff">>{{x}}-{{lastname}}<span style="color: #0000ff"></<span style="color: #800000">li<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">ul<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">p<span style="color: #0000ff">>注意 $rootScope 在循环对象内外都可以访问。<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>
<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"></<span style="color: #800000">body<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">script<span style="color: #0000ff">>

<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> app <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> angular.module(<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">myApp<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">,[]);

app.controller(<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">myCtrl<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">,<span style="background-color: #f5f5f5; color: #0000ff">function<span style="background-color: #f5f5f5; color: #000000"> ($scope,$rootScope) {

<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">Scope 概述

<span style="background-color: #f5f5f5; color: #000000">        $scope.name <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">Runoob<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">;

$scope.sayHello <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #0000ff">function<span style="background-color: #f5f5f5; color: #000000">() {

$scope.greeting <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">Hello <span style="background-color: #f5f5f5; color: #000000">' <span style="background-color: #f5f5f5; color: #000000">+<span style="background-color: #f5f5f5; color: #000000"> $scope.name <span style="background-color: #f5f5f5; color: #000000">+ <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">!<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">;

};

<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">Scope 作用范围

<span style="background-color: #f5f5f5; color: #000000">        $scope.names <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> [<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">Emil<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">,<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">Tobias<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">,<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">Linus<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">];

<span style="background-color: #f5f5f5; color: #008000">//<span style="background-color: #f5f5f5; color: #008000">根作用域

<span style="background-color: #f5f5f5; color: #000000">        $rootScope.lastname <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">Refsnes<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">;

});

<span style="color: #0000ff"></<span style="color: #800000">script<span style="color: #0000ff">>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!