ng-transclude

 1 <!DOCTYPE html>
 2 <html>
 3
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <script src="js/angular/angular.min.js"></script>
 8     </head>
 9
10     <body>
11         <div ng-app="testapp" ng-controller="parentController">
12             <button-bar>
13                 <button class="primary" ng-click="onPrimary1Click()">{{primary1Label}}</button>
14                 <button class="primary">Primary2</button>
15             </button-bar>
16         </div>
17         <script>
18             var testapp = angular.module(‘testapp‘, []);
19             testapp.controller(‘parentController‘, [‘$scope‘, ‘$window‘, function($scope, $window) {
20                 console.log(‘parentController scope id = ‘, $scope.$id);
21                 $scope.primary1Label = ‘Prime1‘;
22
23                 $scope.onPrimary1Click = function() {
24                     $window.alert(‘Primary1 clicked‘);
25                 };
26             }]);
27
28             testapp.directive(‘buttonBar‘, function() {
29                 return {
30                     restrict: ‘EA‘,
31                     template: ‘<div class="span4 well clearfix"><div class="pull-right" ng-transclude></div></div>‘,
32                     replace: true,
33                     transclude: true
34                 };
35             });
36         </script>
37     </body>
38
39 </html>
时间: 2024-11-06 18:00:35

ng-transclude的相关文章

AngularJS 讲解,四 Directive

AngularJS  Directive 自定义指令(我最喜欢AngularJs的功能之一) 一:什么时候我们会用到directive 1.使html更具语义化,不用深入了解研究代码的逻辑便可知道大致逻辑. 2.抽象出一个自定义组件,可以重复使用. 二:directive的定义及其使用方法   1.下面是一个directive参数详细模板 angular.module('app',[]);//申明一个调用angularjs块 angular.module('app').directive('di

directive(指令里的)的compile,pre-link,post-link,link,transclude

The nitty-gritty of compile and link functions inside AngularJS directives  The nitty-gritty of compile and link functions inside AngularJS directives part 2: transclusion [译]ng指令中的compile与link函数解析 AngularJS directives are amazing. They allow you to

angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指令(5)-link文章也提到了link函数的第五个参数linker. 这篇文章就来讲解一下transclude()方法(linker()方法),是怎么使用的,另外,它也是compile函数的第三个参数,用法一样. 下面就通过自己写一个简易的模拟ngRepeat的指令cbRepeat,来了解linke

嘿!@野兽,你的ng api 掉了 - - angular.forEach

@野兽的 ng api 学习 -- angular.forEach angular.forEach 调用迭代器函数取每一项目标的集合,它可以是一个对象或数组.迭代器函数与迭代器(value.key)一起调用,其中值是一个对象属性或数组元素的值,而数组元素是对象属性的关键或数组元素索引.为函数指定一个可选的上下文. 格式:angular.forEach(obj,iterator,[context]); obj:遍历的对象 iterator:迭代器 [content]: 对象为迭代器函数的上下文(t

java.lang.ClassNotFoundException: org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFil

项目启动时报错:java.lang.ClassNotFoundException: org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter struts2的jar包版本号为2.1.8,所以类名是没有错误的,而jar包确实加入进去了.jar包加入的方式是通过user library. 问题解决的办法是:将jar包拷贝到WEB-INF下lib文件夹目录,重新启动tomcat问题解决. ================

ng build --aot --prod生成文件报错

Cannot read property 'create' of undefined when building with --prod or --aot 解决方案:改变zone.js的版本号为0.8.5: 然后删除dist ng_modules,然后重装下就可以正常使用了. /*更新angular-cli*/npm uninstall -g angular-cli npm cache clean npm install -g @angular/[email protected] /*更新引用r

ng $scope与$rootScope的关系

$scope与$rootScope的关系:①不同的控制器之间 是无法直接共享数据②$scope是$rootScope的子作用域对象$scope的id是随着控制器的加载顺序依次递增,$rootScope的id是1 ③不同控制器之间如何通信??1.借助于$rootScope2.既然子作用域对象可以调用父作用域对象的值或者方法,就可以通过控制器之间的嵌套来实现通信3.事件父->子$scope.$broadcast('eventName',args) 子->父$scope.$emit('eventNa

org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter

1.先建立一个项目2.在WebRoot中建立一个jsp,名为index.jsp,在里面写一句话 <body> hello struts2 <br> </body> 3.在后台写入代码 public class T { org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter f; } 4.在struts.xml中写入 <constant name="struts.devMo

嘿!@野兽,你的ng api 掉了 - - angular.uppercase和angular.lowercase

@野兽的 ng api 学习 -- angular.uppercase和angular.lowercase angular.uppercase 将指定的字符串转换成大写 格式:angular.uppercase(string); string:被转换成大写的字符串. 使用代码: var str = "ABCabc"; var upperCase = angular.uppercase(str);//ABCABC angular.lowercase 将指定的字符串转换成小写 格式:ang

ngLazyLoad——让ng项目实现controllers按需异步加载

最初的源码来自:https://github.com/atian25/angular-lazyload/ 但由于一些个人的原因(我有强迫症...)所以把代码的书写风格按照我平日的喜好修改了下 也顺便认真的阅读了一遍源码,按照自己的理解,把原来的英文注释替换成中文的了 毕竟不是原作者,对ng框架也不是特别的熟,注释中的用词可能有不少不正确的地方,欢迎指出 下面是我稍微修改了一下的代码: /* * angular-lazyLoad * 一个angular项目的按需异步加载服务模块 * 支持 [Sea