angularjs-ng-transclude

AngularJS : transclude ng-repeat inside directive

阅读更多关于 AngularJS : transclude ng-repeat inside directive

问题 I have a directive that transcludes the original content, parses it, and uses the information in the original content to help build the new content. The gist of it looks like this: .directive('list', function() { return { restrict: 'E', transclude: true, templateUrl: '...', scope: true, controller: function($scope, $element, $attrs, $transclude) { var items; $transclude(function(clone) { clone = Array.prototype.slice.call(clone); items = clone .filter(function(node) { return node.nodeType ===

AngularJS : transclude ng-repeat inside directive

阅读更多关于 AngularJS : transclude ng-repeat inside directive

ng-transclude as: element vs attribute

阅读更多关于 ng-transclude as: element vs attribute

问题 I want to create a wrapper directive that would serve as the frame for a notification widget in a list. In that frame I want to transclude later some specific content based on a property from the notif object. Currently I hard coded a div element. I have the following in index.cshtml: <div ng-controller="notificationCenterCtrl"> <ul> <li ng-repeat="notif in allNotifications"> <notification-base notification="notif" remove="removeNotification(notif)"> <div style="background-color: fuchsia">bla

ngModel needs $parent when within Transcluded html

阅读更多关于 ngModel needs $parent when within Transcluded html

问题 I have a directive for a input field that uses transclusion to take the elements that are enclosed in the directives element which includes an ng-model attribute. After reading countless SO questions and Angular documentation to find out how to get the ng-model in the transcluded html to sync with the ng-model in my directive I finally stumbled stumbled upon a trick to get it to work. That is to use $parent where the ng-model is within the input field. This is all fine and dandy, however, it

AngularJS - How to transclude through directive, which has no transclusion?

阅读更多关于 AngularJS - How to transclude through directive, which has no transclusion?

问题 folks! I have used AngularJS for a while and decided to put up a component system using directives with transclusion. One day I encountered a problem I was unable to overcome. The problem has to do with my directive, most likely. In order to understand what the problem is, I will briefly go through the basic idea, how "the system" is supposed to operate. Structure I have a directory dedicated for components: For each component, I have HTML markup and CSS file in the components directory as

AngularJS - directive with ng-transclude, no two-way binding

阅读更多关于 AngularJS - directive with ng-transclude, no two-way binding

问题 See that DEMO <body ng-controller="MainCtrl"> {{ obj }} <dir> <input type="text" ng-model="obj" /> </dir> </body> Why when I change the obj scope variable in the custom directive with ng-transclude I don't change it in the MainCtrl $scope.obj . But when I have $scope.obj = { name : 'test' }; in MainCtrl the two-way binding is working the way I expect. See the working DEMO <body ng-controller="MainCtrl"> {{ obj.name }} <dir> <input type="text" ng-model="obj.name" /> </dir> </body> What is the

AngularJS and JQuery UI Tabs

阅读更多关于 AngularJS and JQuery UI Tabs

问题 I've seen some samples of tabs with AngularJS, and very few about JQueryUI tabs with AngularJS, so I tried to create two directives to create the tabs container, and the tab items. Here is the sample code I've created: http://jsfiddle.net/davidzapata/tvq6w1g9/2/ HTML <div ng-app="biApp"> <div ng-controller="MyCtrl"> <h1>{{greeting}}</h1> <jqueryuitabs> <jqueryuitab id="tab1" title="Tab 1">Tab 1 content</jqueryuitab> <jqueryuitab id="tab2" title="Tab 2">Tab 2 content</jqueryuitab> <jqueryuitab

Force scope to named slot with ng-transclude

阅读更多关于 Force scope to named slot with ng-transclude

问题 I've a directive as follows: <selectable-item-list items="model.items"> <item-template> <span ng-bind="item.text"></span> </item-template> </selectable-item-list> The issue is in the <item-template> , where item would be a reference of currently iterated item when an internal ng-repeat is bound inside <selectable-item-list> . AFAIK, it seems like transclusions can't see directive's scope, thus, that item.text can't be bound because there's no item at all. How would you solve this scenario?

Dynamically adding an attribute Directive to a transclude Directive in AngularJS

阅读更多关于 Dynamically adding an attribute Directive to a transclude Directive in AngularJS

问题 I'm attempting to dynamically add an attribute Directive to a transclude directive. For example, the template would start off as follows: <div class="container"> <div ng-transclude></div> </div> After an event takes place (eg. a click), it would then have an attribute Directive added, such as: <div class="container" some-directive> <div ng-transclude></div> </div> I'm using the following JavaScript to do this: div = angular.element("#demoParentDirective .container").clone(); div.attr('some

Transclude function needs to modify clone properly

阅读更多关于 Transclude function needs to modify clone properly

问题 I have a simple directive which repeats a section of transcluded content twice. Like this. link: function (scope, element, attrs, controller, transclude) { transclude(scope.$parent, function(clone) { element.find('[transclude-main]').replaceWith(clone); }); transclude(scope.$parent, function(clone) { element.find('[transclude-overflow]').replaceWith(clone); }); }); This works mainly as intended but if the content contains a form then I end up with two forms with the same name. More