angularjs-directive | 易学教程

Change attribute of custom directive

阅读更多关于 Change attribute of custom directive

问题 I have custom directive to load pages inside a div .directive('page', function () { return { templateUrl: function (elem, attr) { return 'pages/page-' + attr.num + '.html'; } }; }); here is the dom representation of the custom directive <div page num="{{pageNo}}"></div> Here i want to change the page number from the controller. Directive works fine if the value added directly <div page num="1"></div> 回答1: As you want the interpolated value of pageNo inside your directive, You cant get that

Clear the ng-model asssociated to textarea inside Angular Bootstrap UI tabset form an outside button

阅读更多关于 Clear the ng-model asssociated to textarea inside Angular Bootstrap UI tabset form an outside button

问题 I have used angular bootstrap ui tabset to create two tabs and both of the tabs have textareas associated with a ng-model , i have a clear button outside the tabset and i want to clear the ng-model of the textArea in active tab when user presses the clear button. what is the best way to do this? this is what i have done so far. HTML <tabset> <tab heading="Tab One"> <textarea data-ng-model="data.tabOne" class="form-control"></textarea> </tab> <tab heading="Tab two"> <textarea data-ng-model=

Memory leak when manually compiling directives in Angular

阅读更多关于 Memory leak when manually compiling directives in Angular

问题 I'm trying to manually compile a directive and add it to the DOM via JQuery. The directive is a simple div with an ngClick handler. No JQuery plugins are used in the directive itself (which seems to be the focus of many of the other memory leak threads). If you run a profiler you will find that it leaks nodes. Is there something that can be done to fix this or is it a problem in JQuery/Angular? Fiddle here Profiler screenshot HTML <div ng-app="TestApp"> <buttons></buttons> <div id="container"

Angular directive: how to make sure all nested templates and partials loaded?

阅读更多关于 Angular directive: how to make sure all nested templates and partials loaded?

问题 Suppose, I am making a custom Angular directive that has to examine and manipulate the DOM tree inside it (to be precise: the DOM tree under the element the directive is applied to). The right place for such manipulation is the directive's post-link function. That works fine while all the HTML inside the directive is inlined. Problems appear when inside the directive we have other directives that load their templates using "templateUrl" property, or just "ng-include" directives to insert

AngularJS - ng-change as an option in a custom directive

阅读更多关于 AngularJS - ng-change as an option in a custom directive

问题 I want to add an ng-change function into a custom directive but I'm not sure if ng-change will go inside the template or into link function, additionally I'd like to make the ng-change optional (calling ' <text-edit-in-place value="loan.due_date" change="checkException" param="foobar"> ' would add the checkException('foobar') function where leaving out change= & param= would not run any ng-change ). function TextEditInPlaceDirective() { return { restrict: 'E', scope: { value: '=' }, template:

Compiling Element Causes Input Caret Position to Move to End

阅读更多关于 Compiling Element Causes Input Caret Position to Move to End

问题 I am having a problem with a directive. The purpose of the directive is to easily add validation without having to manually add ng-class (among other things) to elements in order to get the error state to show up. I just simply want to put a "validation" directive on my element and have the appropriate classes (and error messages) be generated when there is an error state. As far as the validation goes, it is working great, but it causes an odd side effect. Whenever I am editing a value in an

What is best way to get angularjs ng-repeat variable to a directive called withn the repeat

阅读更多关于 What is best way to get angularjs ng-repeat variable to a directive called withn the repeat

问题 The situation I have is that I want to change a somewhat different element depending on the precise type of the variable in the ng-repeat loop which is not known until runtime. I had thought that the scope in effect would have the variable as an object but when I break in my directive it is not so. If I make an isolate scope in my directive using "@val" for a ng-repeat variable named "val" thus does not work. I tried without an isolated scope but again it was not present when the directive

Float range validation using AngularJs

阅读更多关于 Float range validation using AngularJs

问题 I am following an example based on official docs to validate float. My added requirement is that float value should lie between -90 to 90. I added the min and max fields but still no luck. Below is the code: HTML: <body ng-app="form-example1"> <form name="form" class="css-form" novalidate> <div> Length (float): <input type="text" ng-model="length" name="length" min="-90" max="90" smart-float /> {{length}}<br /> <span ng-show="form.length.$error.float"> This is not a valid float number!</span>

Same directive to multiple inputs. it's possible? AngularJS

阅读更多关于 Same directive to multiple inputs. it's possible? AngularJS

问题 I hope u can help me. I have a directive: .directive('checkField', ['$http', function($http) { return { require: 'ngModel', restrict: 'A', link: function (scope, ele, attrs, c) { scope.$watch(function() { if (attrs.ngModel === 'data.gender_value' && ele.val() !== '') { //valid } else { //error } if (attrs.ngModel === 'data.cardholder_value' && ele.val() !== '') { //valid } else { //error } }); }, template: '' }; }]) And i have multiple inputs in my html: <input ng-model="data.cardholder_value

Scope inheritance for angular directives

阅读更多关于 Scope inheritance for angular directives

问题 I've created a tab control using angular directives. It is consist of tab , tab-item directives with new scope and tab-item-header , tab-item-body directives for which scope is not declared. If I understand correctly these directives use scope of tab-item directive because they are placed inside it. But when I try to get in markup property index which is declared inside tab-item scope it is undefined. app.directive('tabItemHeader', function(){ return { require: '^tabItem', transclude: true,