Tag: angularjs directive

如何从作为可重用组件的指令公开API？: 有一个angular度是一个可重用组件的指令，公开的API可以从控制器访问的最佳做法是什么？所以当有多个组件的实例时，你可以从控制器访问 angular.directive('extLabel', function { return { scope: { name: '@', configObj: '=' }, link: function(scope, iElement, iAttrs) { // this could be and exposed method scope.changeLabel = function(newLabel) { scope.configObj.label = newLabel; } } } }); 然后当有： <ext-label name="extlabel1" config-obj="label1"></ext-label> <ext-label name="extlabel2" config-obj="label2"></ext-label> <ext-label name="extlabel3" config-obj="label3"></ext-label> 我怎样才能访问控制器中的extLabel2的scope.changeLabel？是否有意义？

如何将HTML传递给angular度指令？: 我想创build一个模板的angular度指令，但我也不想丢失的div内的HTML。例如，这里是我想从HTML调用我的指令： <div my-dir> <div class="contents-i-want-to-keep"></div> </div> 那么，我的指示是： app.directive('myDir', [ '$compile', function($compile) { return { restrict: 'E', link: function(scope, iElement, iAttrs){ // assigning things from iAttrs to scope goes here }, scope: '@', replace: false, templateUrl: 'myDir.html' }; }]); 然后是myDir.html，我定义了一个新元素： <div class="example" style="background: blue; height: 30px; width: 30px"></div> 即使当我设置replace为false，我失去了内部的内容，我想要保持分区 – 我对angular docs的理解是，这将被附加在我的模板之后。有什么办法来保存这个（可能通过我的链接function？），结果将是 <div class="example" […]

如何使用ui-view而不是ng-view使用ng-animate？: 我正在使用angularJS v1.2的angular-ui-router，并希望实现自定义页面转换。我怎样才能用ng-animate与ui-view（来自angular-ui-router ）而不是ng-view（这将是标准的方式）？有关ng-view的参考，请参阅AngularJS 1.2中的Remastered Animation 。编辑：我已经尝试了两个不同的angular度版本：v1.2.0-rc.2和v1.2.0-rc.3build议在评论中，但似乎都没有把戏。我想我可能会做错什么？这里是HTML： <div ui-view class="slide"></div> 和CSS： .slide { width:1024px; height:768px; } .slide.ng-enter, .slide.ng-leave { -webkit-transition:0.5s linear all; -moz-transition:0.5s linear all; -o-transition:0.5s linear all; transition:0.5s linear all; border: 1px solid blue; } .slide.ng-enter.ng-enter-active { border: 1px solid red; } 我添加了前面提到的示例的JSfiddle 。尽pipe如此，将这个示例展开来覆盖ng-view和ui-view会很好，但是我不确定如何获取ng / ui-view和部分到JSfiddle。

检测是否为angularjs指令提供了transclude内容: 我有一个指令（进度条），应该有两个可能的状态，一个没有任何描述，一个在左边有一个标签。简单地使用这个标签的transcluded内容会很酷。有没有人知道我可以添加一个类到我的指令取决于是否已经给予transclude内容？所以我想补充一下： <div class="progress" ng-class="{withLabel: *CODE GOES HERE*}"> <div class="label"><span ng-transclude></span> <div class="other">…</div> </div> 非常感谢！

如何通过自定义Angular指令有条件地应用模板？: DEMO 考虑下面的指令： angular.module('MyApp').directive('maybeLink', function() { return { replace: true, scope: { maybeLink: '=', maybeLinkText: '=' }, template: '<span>' + ' <span ng-hide="maybeLink" ng-bind-html="text"></span>' + ' <a ng-show="maybeLink" href="#" ng-bind-html="text"></a>' + '</span>', controller: function($scope) { $scope.text = $scope.maybeLinkText.replace(/\n/g, '<br>'); } }; }); 该指令将<span>和<a>到DOM（一次只能看到一个）。我怎样才能重写指令，使它将<span> DOM <span>或<a>到DOM，但不是两个？ UPDATE 好吧，我想我可以用ng-if这样的话： template: '<span>' + ' <span ng-if="!maybeLink" ng-bind-html="text"></span>' + […]

完成加载ng-include在angular度js中: 用ng -include检测html加载的最佳方法是什么？我想写一些代码，当它将完成加载。感谢您的任何想法。

在Angular指令中使用外部模板（templateURL）上的$ compile: 我有一个recursion的Angular指令，它使用一个模板variables，并在link函数中进行编译。问题是，我的模板已经变得非常长，失去控制，我想在外部HTML文件中将其外部化（这也使得它更容易例如自动缩进）。如何将外部模板加载到可在$compile内部使用的指令中？我见过templateURL ，但是这不让我命名该variables并将其传递给$compile函数。 var template = "<p>My template</p>"+ "<this-directive val='pass-value'></this-directive>"; return { scope: { … }, … link: function(scope, element){ element.html(template); $compile(element.contents())(scope); } } 和

AngularJS指令：链接和编译function是否一起工作？: 我对这个function有一些疑问。可以说我有这个指令： .directive('hello', function () { return { template: '<div>Hello <span ng-transclude></span></div>', restrict: 'E', transclude: true, compile: function() { console.log('Compile()'); return { pre: function() { console.log('PreLink()'); }, post: function() { console.log('PostLink()'); } }; }, link: function postLink(scope, element, attrs) { console.log('Link()'); } }; } 我把它添加到我的模板中： <hello>World</hello> 控制台日志： Compile() PreLink() PostLink() 那么为什么link()不被调用？如果不是从compile()返回一个对象，我返回一个打印PreLink()控制台日志的函数： Compile() PreLink() 如果我不从Compile()返回任何东西，控制台日志： […]

ui.bootstrap.datepicker is-open无法在模态中工作: 我使用Bootstrap UI的datepicker指令，我试图有一个datepickerbutton，像在原来的例子中打开datepickerpopup，但它不能在模式窗口中工作。参见PLUNKER 我究竟做错了什么？

检测未保存的更改并使用angularjs提醒用户: 以下是目前的代码 <!doctype html> <html ng-app> <head> <script src="../1.1.2/angular.min.js"></script> <script type="text/javascript"> function Ctrl($scope) { var initial = {text: 'initial value'}; $scope.myModel = angular.copy(initial); $scope.revert = function() { $scope.myModel = angular.copy(initial); $scope.myForm.$setPristine(); } } </script> </head> <body> <form name="myForm" ng-controller="Ctrl"> myModel.text: <input name="input" ng-model="myModel.text"> <p>myModel.text = {{myModel.text}}</p> <p>$pristine = {{myForm.$pristine}}</p> <p>$dirty = {{myForm.$dirty}}</p> <button ng-click="revert()">Set pristine</button> </form> […]