3-进军 angular1.x 模型和作用域 scope

西南_张家辉

发布于 2021-02-02 09:48:11

1.3K0

发布于 2021-02-02 09:48:11

文章被收录于专栏：张家辉的树屋

3-模型和作用域 scope

angular1.x 学习目录

ng-model

ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。
ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。

"myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
div>


<span class="hljs-keyword">var</span> app = angular.module(<span class="hljs-string">'myApp'</span>, []);
app.controller(<span class="hljs-string">'myCtrl'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">$scope</span>) </span>{
    $scope.name = <span class="hljs-string">"John Doe"</span>;
});
<span class="xml"><span class="hljs-tag"></<span class="hljs-name">script</span>></span></span>
<span class="copy-code-btn">复制代码</span></code></pre><h3 class="heading" data-id="heading-3">验证用户输入</h3>
<pre><code class="hljs javascript copyable" lang="javascript"><form ng-app=<span class="hljs-string">""</span> name=<span class="hljs-string">"myForm"</span>>
    Email:
    <span class="xml"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"myAddress"</span> <span class="hljs-attr">ng-model</span>=<span class="hljs-string">"text"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">ng-show</span>=<span class="hljs-string">"myForm.myAddress.$error.email"</span>></span>不是一个合法的邮箱地址<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span>
<span class="copy-code-btn">复制代码</span></code></pre><p>上实例中，提示信息会在 ng-show 属性返回 true 的情况下显示。</p>
<pre><code class="hljs javascipt copyable" lang="javascipt"><form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
    Email:
    <input type="email" name="myAddress" ng-model="myText" required></p>
    <h1>状态</h1>
    {{myForm.myAddress.$valid}}
    {{myForm.myAddress.$dirty}}
    {{myForm.myAddress.$touched}}
</form>

<span class="copy-code-btn">复制代码</span></code></pre><h3 class="heading" data-id="heading-4">CSS类</h3>
<pre><code class="hljs javascript copyable" lang="javascript"><style>
input.ng-invalid {
    background-color: lightblue;
}
</style>
<body>

<form ng-app="" name="myForm">
    输入你的名字:
    <input name="myAddress" ng-model="text" required>
</form>
<span class="copy-code-btn">复制代码</span></code></pre><h2 class="heading" data-id="heading-5">总结一下</h2>
<ul>
<li>ng-valid: 验证通过</li>
<li>ng-invalid: 验证失败</li>
<li>ng-valid-[key]: 由$setValidity添加的所有验证通过的值</li>
<li>ng-invalid-[key]: 由$setValidity添加的所有验证失败的值</li>
<li>ng-pristine: 控件为初始状态</li>
<li>ng-dirty: 控件输入值已变更</li>
<li>ng-touched: 控件已失去焦点</li>
<li>ng-untouched: 控件未失去焦点</li>
<li>ng-pending: 任何为满足$asyncValidators的情况</li>
</ul>
<h2 class="heading" data-id="heading-6">scope</h2>
<p>Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。</p>
<p>Scope 是一个对象，有可用的方法和属性。</p>
<p>Scope 可应用在视图和控制器上。</p>
<h3 class="heading" data-id="heading-7">如何使用</h3>
<p>使用 ng 创建控制器的时候，你可以将 $scope 当做一个参数传递</p>
<pre><code class="hljs javascript copyable" lang="javascript"><div ng-app="myApp" ng-controller="myCtrl">

<h1>{{carname}}</h1>

</div>

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

app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";
});

复制代码

Scope 概述

AngularJS 应用组成如下：

View(视图), 即 HTML。 Model(模型), 当前视图中可用的数据。 Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。 scope 是模型。

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

如果你修改了视图，模型和控制器也会相应更新：

"myApp" ng-controller="myCtrl">
    <input ng-model="name">
    <h1>{{greeting}}h1>
    <button ng-click='sayHello()'>点我button>    
div>
 

<span class="hljs-keyword">var</span> app = angular.module(<span class="hljs-string">'myApp'</span>, []);
app.controller(<span class="hljs-string">'myCtrl'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">$scope</span>) </span>{
    $scope.name = <span class="hljs-string">"Runoob"</span>;
    $scope.sayHello = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
        $scope.greeting = <span class="hljs-string">'Hello '</span> + $scope.name + <span class="hljs-string">'!'</span>;
    };
});
<span class="xml"><span class="hljs-tag"></<span class="hljs-name">script</span>></span></span>
<span class="copy-code-btn">复制代码</span></code></pre><h3 class="heading" data-id="heading-9">思考和反思</h3>
<ul>
<li><img alt="rootscope设置的变量在所有controller里面都是可以直接用{{" class="equation" src="https://juejin.im/equation?tex=rootscope%E8%AE%BE%E7%BD%AE%E7%9A%84%E5%8F%98%E9%87%8F%E5%9C%A8%E6%89%80%E6%9C%89controller%E9%87%8C%E9%9D%A2%E9%83%BD%E6%98%AF%E5%8F%AF%E4%BB%A5%E7%9B%B4%E6%8E%A5%E7%94%A8%7B%7B">root.变量名}}来显示的，当然也可以赋值给$scope.</li>
<li>$rootScope 全局对象的属性可在所有子作用域中访问，子作用域互相无法访问对方的私有变量，这一点与js的函数作用域完全一致。</li>
</ul>
<pre><code class="hljs html copyable" lang="html"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">body</span> <span class="hljs-attr">ng-app</span>=<span class="hljs-string">"myApp"</span> ></span>
    <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">ng-controller</span>=<span class="hljs-string">"myCtrl"</span>></span>
        在控制器中使用scope：{{ myf }}<span class="hljs-tag"><<span class="hljs-name">br</span>/></span>
        在控制器中使用rootScope：{{ allf }}<span class="hljs-tag"><<span class="hljs-name">br</span>/></span>
        在控制器中使用scope按钮事件：
        <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"scope点击事件"</span> <span class="hljs-attr">ng-click</span>=<span class="hljs-string">"sayHello()"</span>/></span>
    <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
    不在控制器中使用scope：{{ myf }}<span class="hljs-tag"><<span class="hljs-name">br</span>/></span>
    不在控制器中使用rootScope：{{ allf }}<span class="hljs-tag"><<span class="hljs-name">br</span>/></span>
    
    <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">ng-controller</span>=<span class="hljs-string">"myCtrl2"</span>></span>
     比较私有域变量是否可以他用 {{mys}} {{myf}}
    <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
    不在控制器中使用scope按钮事件：
    <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"scope点击事件"</span> <span class="hljs-attr">ng-click</span>=<span class="hljs-string">"sayHello()"</span>/></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="actionscript">
<span class="hljs-keyword">var</span> app = angular.module(<span class="hljs-string">'myApp'</span>,[]);
<span class="hljs-comment">// 两个控制器</span>
app.controller(<span class="hljs-string">'myCtrl'</span>, [<span class="hljs-string">'$scope'</span>, <span class="hljs-string">'$rootScope'</span>,myCtrl]);
app.controller(<span class="hljs-string">'myCtrl2'</span>, [<span class="hljs-string">'$scope'</span>,<span class="hljs-string">'$rootScope'</span>, myCtrl2]);

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">myCtrl</span><span class="hljs-params">($scope,$rootScope)</span></span>{
  $scope.myf = <span class="hljs-number">1</span>;
  $scope.sayHello = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
      alert(<span class="hljs-string">"hello world"</span>);
  }
  $rootScope.allf = <span class="hljs-string">'全局1'</span>;
} 

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">myCtrl2</span><span class="hljs-params">($scope,$rootScope)</span></span>{
  $scope.mys = <span class="hljs-number">2</span>;
  $rootScope.alls = <span class="hljs-string">'全局2'</span>;
}
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>

<span class="copy-code-btn">复制代码</span></code></pre></div> <div class="image-viewer-box" data-v-78c9b824=""><!----></div>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

html