AngularJS实现自定义指令与控制器数据交互的方法示例
更新时间：2017年06月19日 10:51:50 作者：一花一世界,一叶一乾坤
这篇文章主要介绍了AngularJS实现自定义指令与控制器数据交互的方法,结合具体实例形式分析了AngularJS自定义指令的实现以及与控制器数据交互的操作技巧,需要的朋友可以参考下
本文实例讲述了AngularJS实现自定义指令与控制器数据交互的方法。分享给大家供大家参考，具体如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS自定义指令与控制器数据交互</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>
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
相关文章
Angular.js前台传list数组由后台spring MVC接收数组示例代码
这篇文章主要给大家介绍了关于Angular.js前台传list数组之后，由后台spring MVC接收数组的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。2017-07-07
这篇文章主要给大家介绍了Angular2中组件与指令的一个小实践，利用组件和指令实现一个图片轮播组件的相关资料，文中给出了详细的介绍和示例代码，需要的朋友可以参考学习，下面来一起看看吧。2017-03-03
anime.js是一个灵活的轻型JavaScript动画库。这篇文章主要介绍了anime.js 实现带有描边动画效果的复选框 ,需要的朋友可以参考下2017-12-12
本篇文章主要介绍了Angular开发者指南的入门知识，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章主要给大家介绍了关于Angular管道PIPE的相关资料,管道的作用就是传输,并且不同的管道具有不同的作用,需要的朋友可以参考下2021-06-06
本文主要介绍了AngularJS ng-if 指令,在这里整理了一些ng-if 指令的基础资料,并有实例代码,有需要的同学可以参考下2016-08-08
resolve保证了数据获取后再进行路由跳转，防止因为数据延迟而出现短暂的空组件情况，本文就介绍一下Angular resolve基础用法，感兴趣的小伙伴们可以参考一下2018-10-10
下面小编就为大家带来一篇浅谈angularjs module返回对象的坑(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要介绍了AngularJS bootstrap启动的知识，这里整理了相关资料及简单实例代码，,需要的朋友可以参考下2016-09-09
Angular 主要分为八大构造块（也就是八个核心概念）：模块、组件、模板、元数据、数据绑定、指令、服务、依赖注入。有兴趣的可以了解一下2017-06-06
最新评论