快捷導(dǎo)航

AngularJS ng-controller 指令簡(jiǎn)單實(shí)例

更新時(shí)間：2016年08月01日 10:21:09 投稿：lqh

本文主要介紹AngularJS ng-controller 指令,這里對(duì)ng-controller指令資料的整理,并附代碼示例和效果圖,有需要的朋友看下

AngularJS ng-controller 指令

AngularJS 實(shí)例

為應(yīng)用變量添加控制器:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
});
</script>

<p>該實(shí)例演示了如何定義一個(gè)控制器及 scope 的使用。</p>

</body>
</html>

運(yùn)行結(jié)果：

Full Name: John Doe

該實(shí)例演示了如何定義一個(gè)控制器及 scope 的使用。

定義和用法

ng-controller 指令用于為你的應(yīng)用添加控制器。

在控制器中，你可以編寫(xiě)代碼，制作函數(shù)和變量，并使用 scope 對(duì)象來(lái)訪問(wèn)。

語(yǔ)法

所有 HTML 元素都支持。

參數(shù)值

值	描述
expression	控制器名。

希望能幫助學(xué)習(xí)AngularJS的同學(xué)，后續(xù)繼續(xù)補(bǔ)充相關(guān)知識(shí)。

您可能感興趣的文章:

相關(guān)文章

AngularJS中的過(guò)濾器使用詳解
這篇文章主要介紹了AngularJS中的過(guò)濾器使用詳解,過(guò)濾器是AngularJS中處理文本的一個(gè)非常有用的功能,需要的朋友可以參考下
2015-06-06
angular 組件通信的幾種實(shí)現(xiàn)方式
這篇文章主要介紹了angular 組件通信的幾種實(shí)現(xiàn)方式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07
Angular?服務(wù)器端渲染應(yīng)用常見(jiàn)的內(nèi)存泄漏問(wèn)題小結(jié)
這篇文章主要介紹了Angular?服務(wù)器端渲染應(yīng)用一個(gè)常見(jiàn)的內(nèi)存泄漏問(wèn)題,主要包括屏幕閃爍問(wèn)題，出現(xiàn)閃爍的原因，在于 Angular 不知道如何重用它在服務(wù)器上成功渲染的內(nèi)容，本文給大家介紹的非常詳細(xì)，需要的朋友一起學(xué)習(xí)下吧
2022-06-06
Angular中響應(yīng)式表單的三種更新值方法詳析
這篇文章主要給大家詳細(xì)解析了關(guān)于Angular中響應(yīng)式表單的三種更新值方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2017-08-08
Angular實(shí)現(xiàn)響應(yīng)式表單
本篇文章主要介紹了Angular實(shí)現(xiàn)響應(yīng)式表單，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
利用Angular.js限制textarea輸入的字?jǐn)?shù)
相信在大家已經(jīng)學(xué)習(xí)了足夠多關(guān)于AngularJS的知識(shí)后，就可以開(kāi)始創(chuàng)建第一個(gè)AngularJS應(yīng)用程序，這篇文章通過(guò)示例給大家介紹如何利用Angular.js限制textarea輸入的字?jǐn)?shù)，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。
2016-10-10
Angular中使用ng-zorro圖標(biāo)庫(kù)部分圖標(biāo)不能正常顯示問(wèn)題
這篇文章主要介紹了Angular中使用ng-zorro圖標(biāo)庫(kù)部分圖標(biāo)不能正常顯示問(wèn)題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-04-04
Angular實(shí)現(xiàn)二級(jí)導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了Angular實(shí)現(xiàn)二級(jí)導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
詳解Angualr 組件間通信
本篇文章主要介紹了Angualr 組件間通信，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-01-01
Angular.JS中select下拉框設(shè)置value的方法
select 是 AngularJS 預(yù)設(shè)的一組directive。下面這篇文章主要給大家介紹了關(guān)于Angular.JS中select下拉框設(shè)置value的方法，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-06-06