angularjs-directive | 易学教程

How multiple ng-app works in angular

阅读更多关于 How multiple ng-app works in angular

I tried giving two ng-app in an application , when i gave two ng-app like <body> <div ng-app="A"> <div ng-controller="AC"> </div> </div> <div ng-app="B"> <div ng-controller="BC"> </div> </div> </body> Then second ng-app does not work. But when i change the scope of first ng-app="A" from div to body then both works fine like <body ng-app="A"> <div> <div ng-controller="AC"> </div> </div> <div ng-app="B"> <div ng-controller="BC"> </div> </div> </body> Can anyone let me know why this behavior as i am quite new to angular. I wanted to know why it worked as i didn't called angular.bootstrap on the

Angular - broadcast , $on called multiple times in directive

阅读更多关于 Angular - broadcast , $on called multiple times in directive

问题 I am working on a single page app, with angular and I have a need to communicate between 2 different directives which basically don't have a parent child relation. In Directive A, I have 2 places where I need to broadcast same event from different functions. And in Directive B, have written a $on listener for that. Now, I observe that the whenever callFirstFunc & its broadcast is called for first time, the listener will be called once. Upon subsequent calling, the listener is called twice,

Directive to allow only alphabetic characters in view and model value

阅读更多关于 Directive to allow only alphabetic characters in view and model value

I am trying to achieve a directive that would be used to accept only alphabets into the text box i.e from a-z or A-z I did try to do this by, angular.module('myApp', []).directive('alphabetsOnly', function(){ return { require: 'ngModel', link: function(scope, element, attrs, modelCtrl) { modelCtrl.$parsers.push(function (inputValue) { if (inputValue == undefined) return '' var transformedInput = inputValue.replace(/^[a-zA-Z]+$/, ''); if (transformedInput!=inputValue) { modelCtrl.$setViewValue(transformedInput); modelCtrl.$render(); } return transformedInput; }); } }; }); function MyCtrl($scope

Changing CSS from AngularJS

阅读更多关于 Changing CSS from AngularJS

问题 DOM changes from angularjs controllers are not a good practice. In my application, after clicking on a link, I am changing class of an html element inside ngView. the intended behaviour is, that i have three divs, and I am changing if the middle one is shown or not. I am doing this from a controller. I have read, that doing DOM manipulation should be done in a directive, but my mind is not broad enough to find a solution. Please, if you have a suggestion, I will be glad. 回答1: Use ng-class. e

how to remove Unexpected request: GET data.json?

阅读更多关于 how to remove Unexpected request: GET data.json?

I am trying to use $httpBackend to test my $http request ..i AM getting this error Unexpected request: GET data.json No more request expected here is my testing code beforeEach(inject(function($rootScope,$controller,appfactory,_$httpBackend_) { $scope = $rootScope.$new(); $httpBackend=_$httpBackend_; ctrl = $controller('cntrl', {$scope: $scope}); fac=appfactory; modeSpy= spyOn(fac, 'mode').and.returnValue('a'); })); it('test true value',function(){ expect(true).toBeTruthy() }) it('check message value',function(){ $scope.toggle(); expect($scope.message).toEqual('naveen') }) it("tracks that the

Angular 1.5 component attribute presence

阅读更多关于 Angular 1.5 component attribute presence

问题 I'm refactoring some angular directives to angular 1.5-style components. Some of my directives have behavior that depends on a certain attribute being present, so without the attribute having a specific boolean value. With my directives, I accomplish this using the link function: link: function(scope,elem,attrs, controller){ controller.sortable = attrs.hasOwnProperty('sortable'); }, How would I do this with the angular 1.5-style component syntax? One thing I could do is add a binding, but

Is there a way to pass the scope to a directive templateUrl: function?

阅读更多关于 Is there a way to pass the scope to a directive templateUrl: function?

问题 I have a directive that I'm calling with in a loop. Each item in the loop has a FieldTypeId attribute, and depending on the value of FieldTypeId, I want to swap out the URL of the template. I feel that this is a better and polymorphic approach rather than doing an ng-switch statement in the html. <div ng-repeat="item in attributes"> <div attribute-input></div> </div> Of course, the $scope isn't available in this directive: editStudentAccountModule.directive('attributeInput', function () {

Disable Unwanted Validation in AngularJS (Conditional Validation)

阅读更多关于 Disable Unwanted Validation in AngularJS (Conditional Validation)

问题 I have a form that needs to be validated. The form contains many parts, and some of them are disabled by default. The value in each field is correct, but it's against my validation directives. For example, when it's disable it should contain 0, but when it's editable it should contains something else. Anyway I attach a disable directive to them, and put them down. When i submit my form (using angular scope function), if ($scope.sarfaslForm.$invalid) --> returns true. It says I have two

Directive, wrap content and keep attributes on original element

阅读更多关于 Directive, wrap content and keep attributes on original element

问题 I have a bit of trouble creating a directive that wraps the element (and its children) that the directive is applied to. I don't get why this seemingly common scenario should be so difficult considering how easy many other commonplace things are in AngularJS, so it could very well be that I'm missing something here. What I want to do is to wrap a select element in a div. I'm using transclude to preserve the original select element and its content but I can't get it to work correctly. The HTML

Load directive after AJAX call

阅读更多关于 Load directive after AJAX call

问题 I have build a directive for pagination that takes two arguments; the current page and the total number of pages. <pagination page="page" number-of-pages="numberOfPages"></pagination> The issue is that I will only know the value of numberOfPages after an AJAX call (through ng-resource). But my directive is already rendered before that the AJAX call is done. app.controller('MyController', function ($scope, $routeParams) { $scope.page = +$routeParams.page || 1, $scope.numberOfPages = 23; //