AngularJS實現(xiàn)自定義指令與控制器數(shù)據(jù)交互的方法示例
更新時間：2017年06月19日 10:51:50 作者：一花一世界,一葉一乾坤
這篇文章主要介紹了AngularJS實現(xiàn)自定義指令與控制器數(shù)據(jù)交互的方法,結(jié)合具體實例形式分析了AngularJS自定義指令的實現(xiàn)以及與控制器數(shù)據(jù)交互的操作技巧,需要的朋友可以參考下
本文實例講述了AngularJS實現(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)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
相關(guān)文章
Angular.js前臺傳list數(shù)組由后臺spring MVC接收數(shù)組示例代碼
這篇文章主要給大家介紹了關(guān)于Angular.js前臺傳list數(shù)組之后，由后臺spring MVC接收數(shù)組的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
這篇文章主要給大家介紹了Angular2中組件與指令的一個小實踐，利用組件和指令實現(xiàn)一個圖片輪播組件的相關(guān)資料，文中給出了詳細(xì)的介紹和示例代碼，需要的朋友可以參考學(xué)習(xí)，下面來一起看看吧。2017-03-03
anime.js 實現(xiàn)帶有描邊動畫效果的復(fù)選框（推薦）
anime.js是一個靈活的輕型JavaScript動畫庫。這篇文章主要介紹了anime.js 實現(xiàn)帶有描邊動畫效果的復(fù)選框 ,需要的朋友可以參考下2017-12-12
本篇文章主要介紹了Angular開發(fā)者指南的入門知識，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要給大家介紹了關(guān)于Angular管道PIPE的相關(guān)資料,管道的作用就是傳輸,并且不同的管道具有不同的作用,需要的朋友可以參考下2021-06-06
本文主要介紹了AngularJS ng-if 指令,在這里整理了一些ng-if 指令的基礎(chǔ)資料,并有實例代碼,有需要的同學(xué)可以參考下2016-08-08
resolve保證了數(shù)據(jù)獲取后再進(jìn)行路由跳轉(zhuǎn)，防止因為數(shù)據(jù)延遲而出現(xiàn)短暫的空組件情況，本文就介紹一下Angular resolve基礎(chǔ)用法，感興趣的小伙伴們可以參考一下2018-10-10
下面小編就為大家?guī)硪黄獪\談angularjs module返回對象的坑(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要介紹了AngularJS bootstrap啟動的知識，這里整理了相關(guān)資料及簡單實例代碼，,需要的朋友可以參考下2016-09-09
Angular 主要分為八大構(gòu)造塊（也就是八個核心概念）：模塊、組件、模板、元數(shù)據(jù)、數(shù)據(jù)綁定、指令、服務(wù)、依賴注入。有興趣的可以了解一下2017-06-06