AngularJS實(shí)現(xiàn)自定義指令與控制器數(shù)據(jù)交互的方法示例
更新時(shí)間：2017年06月19日 10:51:50 作者：一花一世界,一葉一乾坤
這篇文章主要介紹了AngularJS實(shí)現(xiàn)自定義指令與控制器數(shù)據(jù)交互的方法,結(jié)合具體實(shí)例形式分析了AngularJS自定義指令的實(shí)現(xiàn)以及與控制器數(shù)據(jù)交互的操作技巧,需要的朋友可以參考下
本文實(shí)例講述了AngularJS實(shí)現(xiàn)自定義指令與控制器數(shù)據(jù)交互的方法。分享給大家供大家參考，具體如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS自定義指令與控制器數(shù)據(jù)交互</title>
<!-- <script src="http://cdn.bootcss.com/angular.js/1.3.15/angular.js"></script>-->
<script src="../../lib/angular/angular.js"></script>
<script>
angular.module('yyApp', [])
.controller('yyHelloController', function($scope){
$scope.data = {
name: '張三'
}
})
.controller('yyHelloController2', function($scope){
$scope.data = {
name: '李四'
}
})
.directive('yyHello', function(){
return{
restrict: 'AE',
replace: true,
template: '<div name="{{data.name}}">你好,{{data.name}}</div>'
};
});
</script>
</head>
<body ng-app='yyApp'>
<yy-hello ng-controller='yyHelloController'></yy-hello>
<div ng-controller='yyHelloController2'>
<input type="text" ng-model='data.name'>
<yy-hello></yy-hello>
</div>
</body>
</html>
更多關(guān)于A(yíng)ngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門(mén)與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
相關(guān)文章
Angular.js前臺(tái)傳list數(shù)組由后臺(tái)spring MVC接收數(shù)組示例代碼
這篇文章主要給大家介紹了關(guān)于A(yíng)ngular.js前臺(tái)傳list數(shù)組之后，由后臺(tái)spring MVC接收數(shù)組的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
Angular2利用組件與指令實(shí)現(xiàn)圖片輪播組件
這篇文章主要給大家介紹了Angular2中組件與指令的一個(gè)小實(shí)踐，利用組件和指令實(shí)現(xiàn)一個(gè)圖片輪播組件的相關(guān)資料，文中給出了詳細(xì)的介紹和示例代碼，需要的朋友可以參考學(xué)習(xí)，下面來(lái)一起看看吧。2017-03-03
anime.js 實(shí)現(xiàn)帶有描邊動(dòng)畫(huà)效果的復(fù)選框（推薦）
anime.js是一個(gè)靈活的輕型JavaScript動(dòng)畫(huà)庫(kù)。這篇文章主要介紹了anime.js 實(shí)現(xiàn)帶有描邊動(dòng)畫(huà)效果的復(fù)選框 ,需要的朋友可以參考下2017-12-12
Angular開(kāi)發(fā)者指南之入門(mén)介紹
本篇文章主要介紹了Angular開(kāi)發(fā)者指南的入門(mén)知識(shí)，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
這篇文章主要給大家介紹了關(guān)于A(yíng)ngular管道PIPE的相關(guān)資料,管道的作用就是傳輸,并且不同的管道具有不同的作用,需要的朋友可以參考下2021-06-06
本文主要介紹了AngularJS ng-if 指令,在這里整理了一些ng-if 指令的基礎(chǔ)資料,并有實(shí)例代碼,有需要的同學(xué)可以參考下2016-08-08
resolve保證了數(shù)據(jù)獲取后再進(jìn)行路由跳轉(zhuǎn)，防止因?yàn)閿?shù)據(jù)延遲而出現(xiàn)短暫的空組件情況，本文就介紹一下Angular resolve基礎(chǔ)用法，感興趣的小伙伴們可以參考一下2018-10-10
淺談angularjs module返回對(duì)象的坑(推薦)
下面小編就為大家?guī)?lái)一篇淺談angularjs module返回對(duì)象的坑(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
AngularJS bootstrap啟動(dòng)詳解及實(shí)例代碼
這篇文章主要介紹了AngularJS bootstrap啟動(dòng)的知識(shí)，這里整理了相關(guān)資料及簡(jiǎn)單實(shí)例代碼，,需要的朋友可以參考下2016-09-09
Angular 主要分為八大構(gòu)造塊（也就是八個(gè)核心概念）：模塊、組件、模板、元數(shù)據(jù)、數(shù)據(jù)綁定、指令、服務(wù)、依賴(lài)注入。有興趣的可以了解一下2017-06-06