angularjs-directive | 易学教程

Angular JS and Complex Directives

阅读更多关于 Angular JS and Complex Directives

问题 This is an AngularJS widget which replaces a tag with an editable text field. Clicking the text replaces it with an input field, and hitting enter on the input updates an existing resource. I am not happy with the code I produced. Are all of these evals and applys really necessary? How can I improve this? To use editable-text(model="activeCustomer.phone_number", resource="Customer", field="phone_number") The Directive Code .directive("editableText", function($injector){ return { restrict: "E"

Angularjs Button loading state directive with ng-disabled directive

阅读更多关于 Angularjs Button loading state directive with ng-disabled directive

问题 I am trying to reconcile using the following directive for changing a button's loading state via bootstrap js plugin: .directive("btnLoading", function() { return function(scope, element, attrs) { scope.$watch(function() { return scope.$eval(attrs.btnLoading); }, function(loading) { if (loading) return element.button("loading"); element.button("reset"); }); }; This is working quite well as it controls the state of the button when necessary and adds the loading text as advertised. The issue I

Why is angular.js not smart enough to compile DOM when adding dynamic elements?

阅读更多关于 Why is angular.js not smart enough to compile DOM when adding dynamic elements?

I really like how AngularJS enables custom tags/elements by allowing you to declare directives inside your app, however, when I append a custom tag dynamically, nothing happens: angular.module('myApp', []).directive('test', (($compile) -> restrict: 'E' link: (scope, element, attributes) -> $(element).html('<h1>this is a test!</h1>') )) $('body').append('<test></test>') How can I build an instance of my custom tag dynamically? Why are you calling jquery outside of angular? Normally you would do something from inside an angular directive for instance and that would have access to $compile. If

AngularJS - Add computation value from a function to the scope

阅读更多关于 AngularJS - Add computation value from a function to the scope

I have two datepicker fields which is implemented using AngularStrap datepicker directives: http://mgcrea.github.io/angular-strap/ . <input type="text" name="startDate" ng-model="startDate" data-date-format="dd/mm/yyyy" placeholder="DD/MM/YYYY" bs-datepicker /> <button type="button" class="btn" data-toggle="datepicker"> <i class="icon-calendar"></i> </button> <input type="text" name="endDate" ng-model="endDate" data-date-format="dd/mm/yyyy" placeholder="DD/MM/YYYY" bs-datepicker /> <button type="button" class="btn" data-toggle="datepicker"> <i class="icon-calendar"></i> </button> I also have a

Directive for lazyloading data in AngularJS

阅读更多关于 Directive for lazyloading data in AngularJS

问题 I'm currently learning Angular and trying to figure out a good pattern for lazyloading data and structuring code. I'm making an responsive web application, and I would like do be able to define that some parts of the web-page are to be hidden from the view (preferably using media queries). The data fetched for the hidden directives or views is then redundant. The difference can be substantial from a desktop to a mobile view, and I would like the application to be as light as possible on the

ngSticky plugin not working when the sticky directive is used inside of a template

阅读更多关于 ngSticky plugin not working when the sticky directive is used inside of a template

问题 I'm using the Ionic framework and was looking for a non-jquery sticky menu plugin, when I found ngSticky . bower install ngSticky Great plugin, the demo file included shows it working great, just add the sticky attribute to whatever div you want stickfied. Problem is, for some reason it's not working inside of my <ion-nav-view> <ion-content> part of the Ionic framework . Here is my demo link: http://leongaban.com/sticky/#/ When you scroll down, the gray header bar should stick. It does stick

How to dynamically add a directive to all input elements in AngularJS across controllers & modules

阅读更多关于 How to dynamically add a directive to all input elements in AngularJS across controllers & modules

问题 I want to add a directive dynamically to all my textboxes in all my controllers & forms. I got a hack from here : How to dynamically add a directive to an input element in AngularJS but in my case: there are around 200+ forms spread across different controllers & modules & it will be very time consuming to add it everywhere. Is there an easier or more elegant way to do it ? Edit: What I want to do ? I want to remove all leading & trailing spaces entered by user in all input boxes. 回答1:

Getting angular directive attribute value returns 'undefined'

阅读更多关于 Getting angular directive attribute value returns 'undefined'

I'm doing a directive for input mask. But, when I pass a string as value the attribute is undefined. If I pass directly the mask It's working. .directive('inputMask', function () { return { restrict: 'EAC', scope: true, link: function (scope, element, attrs) { scope.$watch('inputMask', function (newVal) { console.log('inputMask', newVal); }); var maskType = scope.$eval(attrs.inputMask); switch (maskType) { case 'phone': $(element).inputmask("phone", { url: '@Url.Content("~/Scripts/jquery-inputmask/phone-codes/phone-codes.json")', onKeyValidation: function () { //show some metadata in the

Angular JS : Insert one directive into another directive dynamically

阅读更多关于 Angular JS : Insert one directive into another directive dynamically

First of all, the way i am doing may not be correct. But i will explain the problem: 1) I am creating directive called as < firstDirective > 2) when the clicks on a button in the first directive, then I am trying to insert the second directive dynamically at runtime As follows: <!DOCTYPE html> <html> <script src="lib/angular/angular.js"></script> <body ng-app="myApp"> <first-directive></first-directive> <script> var app = angular.module("myApp", []); app.directive("firstDirective", function() { return { template : '<h1>This is first directive!</h1> <br / ><br / ><button type="button" ng-click=

AngularJs - Calling controller function from directive

阅读更多关于 AngularJs - Calling controller function from directive

问题 In an angularjs project I am using a directive to upload files by drag/dropping them in a dropzone. In the directive I need to call a function that is defined within my controller. Here is what I am doing: (function () { 'use strict'; angular .module('app') .controller('myController', myController) .directive('fileDropzone', function () { return { restrict: 'A', scope: { file: '=', fileName: '=', test: '&callbackFn', }, link: function (scope, element, attrs) { var processDragOverOrEnter;