angularjs-directive | 易学教程

AngularJS - Modular forms with directives

阅读更多关于 AngularJS - Modular forms with directives

问题 I originally asked this question here, but I think I got ahead of myself and made it more complicated than it really is, so I'm re-asking it here with a bit clearer wording. How do you create re-usable form widgets with directives and re-useable parameters? Like this: <form> <special-input label-text="A Special Input" bind-to="data.special"></special-input> <special-input label-text="Specialer" bind-to="data.moreSpecial"></special-input> </form> Directive templates don't seem to allow

Nested directives - cannot pass args to controller method from child directive in Angularjs

阅读更多关于 Nested directives - cannot pass args to controller method from child directive in Angularjs

I'm having some trouble with nested directives in angularjs. I want to call a controller method from a directive within another directive and am trying to pass arguments to it, however they are undefined. I'm attempting to call remove() with three arguments from selected.html below. It was working before I introduced a parent directive (televisionFilter.js) Can anyone suggest what to do to pass these to the controller? Thanks! Code: controller.js $scope.remove = function(selectorToRemove, choicesArr, selectedArr){ console.log(selectorToRemove); //undefined console.log(choicesArr); //undefined

AngularJS Custom Directive Two Way Binding

阅读更多关于 AngularJS Custom Directive Two Way Binding

问题 If I have an AngularJS directive without a template and I want it to set a property on the current scope, what is the best way to do it? For example, a directive that counts button clicks: <button twoway="counter">Click Me</button> <p>Click Count: {{ counter }}</p> With a directive that assigns the click count to the expression in the two way attribute: .directive('twoway', [ '$parse', function($parse) { return { scope: false, link: function(scope, elem, attrs) { elem.on('click', function() {

Dynamically add angular attributes to an element from a directive

阅读更多关于 Dynamically add angular attributes to an element from a directive

问题 I'm trying to build a directive that change loading status on buttons for slow ajax calls. Basically the idea is to set an attribute "ng-loading" to a button element, and let the directive add the rest of stuff. This is the html code: <button class="btn btn-primary" name="commit" type="submit" ng-loading="signupLoading"> Submit </button> And this is the directive code: .directive('ngLoading', ['$compile', function($compile) { return { restrict: 'A', replace: false, terminal: true, link:

Angular-UI-Bootstrap custom tooltip/popover with 2-way data-binding

阅读更多关于 Angular-UI-Bootstrap custom tooltip/popover with 2-way data-binding

问题 I am using angular-ui-bootstrap in my current project, and I have a requirement for a popover that will allow the user to take some action on a given element (rename/edit/delete/etc...). Since angular-ui's bootstrap popover doesn't allow for custom html or data-binding by default, I have copied their tooltip/popover .provider and .directive in an effort to customize it to my needs. Main Problem : The ng-click bindings are being lost after the popup is closed and re-opened. Secondary Problem :

AngularJS: Custom directive using dynamic attribute value doesn't work inside “ng-repeat”

阅读更多关于 AngularJS: Custom directive using dynamic attribute value doesn't work inside “ng-repeat”

问题 Could you explain please why the following directive doesn't work? attrs.ngMydirective seems to be undefined inside the linking function. Live example here HTML: <body ng-controller="MyCtrl"> <ul> <li ng-repeat="person in people"> {{ person.name }} <span ng-mydirective="{{ person.age }}"></span> </li> </ul> </body> JS: var app = angular.module('myApp', []); app.directive('ngMydirective', function() { return { replace: true, link: function(scope, element, attrs) { if (parseInt(attrs

trigger click event from angularjs directive

阅读更多关于 trigger click event from angularjs directive

问题 How can i trigger a click event for li elements specifying their index from the angularjs directive? I have tried using $first for triggering click for the first element, but its not working. Thanks for any help. 回答1: Here is perhaps a different way for you to achieve this. Pass into the directive both the index and the item and let the directive setup the html in a template: Demo: http://plnkr.co/edit/ybcNosdPA76J1IqXjcGG?p=preview html: <ul id="thumbnails"> <li class="thumbnail" ng-repeat=

AngularJS directive with method called from outside

阅读更多关于 AngularJS directive with method called from outside

I created a directive with a method that should be called from other elements that are not part of the directive. However it looks like this method is not exposed. Some example jade code to clarify: //- a controller for the view itself div(ng-controller="someController") //- this is part of the view itself, not within the directive div(ng-repeat="element in elements") div(ng-click="methodFromDirective(element)") click element {{$index}} to trigger directive //- this is the directive div(some-directive) The someController isn't too important here I think. It has methods but NOT the

How can I use ng-click to dynamically reload ng-repeat data?

阅读更多关于 How can I use ng-click to dynamically reload ng-repeat data?

I have a page that contains an ng-repeat directive. The ng-repeat works when the page first loads, but I want to be able to use ng-click to refresh the contents of the ng-repeat . I have tried the following code but it doesn't work. Any suggestions? <div ng-click="loadItems('1')">Load 1st set of items</div> <div ng-click="loadItems('2')">Load 2nd set of items</div> ... <table> <tr ng-repeat="item in items">> // stuff </tr> </table> ItemsCtrl: $scope.loadItems = function (setID) { $http({ url: 'get-items/'+setID, method: "POST" }) .success(function (data, status, headers, config) { $scope.items

wrapping inputs in directives in angular

阅读更多关于 wrapping inputs in directives in angular

I had the idea to wrap inputs into custom directives to guarantee a consistent look and behavior through out my site. I also want to wrap bootstrap ui's datepicker and dropdown. Also, the directive should handle validation and display tooltips. The HTML should look something like this: <my-input required max-length='5' model='text' placeholder='text' name='text'/> or <my-datepicker required model='start' placeholder='start' name='start'/> in the directives i want to create a dom structure like: <div> <div>..</div> //display validation in here <div>..</div> //add button to toggle datepicker (or