w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
Angular directives: can we use '_' instead of '-' for separating words in directives
Off the top of my head, I would say that they aren't equivalent and the second one is invalid. But, much to my surprise, after doing a quick test it seems that both are valid and functional, except for the ng-app directive. This jsFiddle illustrates it. This is not documented, though. What the documentation says is: (...) The normalization is needed since all of these are treated as equivalent in Angular: <span ng:bind="a" ng-bind="a" data-ng-bind="a" x-ng-bind="a"> That said, I think it's safer if you stick to the docs and pick one of the official formats in order to keep you code future-proof. Update I've just found out the following in the Angular docs: Directives have camel cased names such as ngBind. The directive can be invoked by translating the camel case na

Categories : Angularjs

kendoui angular grid selection event
please try the following: $scope.onSelection = function(kendoEvent) { var grid = kendoEvent.sender; var selectedData = grid.dataItem(grid.select()); console.log(selectedData.id); }

Categories : Javascript

angular-js angular-strap and ng-grid integration?
To determine which tab is clicked, you can do <div data-fade="1" ngModel="activeTab" bs-tabs> <div ng-repeat="tab in tabs" data-title="{{tab.title}}" ng-click="loadData()"><p>{{tab.content}}</p></div> </div> In the controller, you can do: $scope.loadData = function(){ switch(activeTab){ case 0: //load data break; case 1: .... } } To load data, you can look at $http or $resource module.

Categories : Javascript

angular.js two directives, second one does not execute
div's are not void elements and require a closing tag. <div ng-app="myApp"> <div ng-controller="PlayersCtrl"> <div primary text="{{primaryText}}"></div> <div secondary text="{{secondaryText}}"></div> </div> </div> Example

Categories : Javascript

How to use JQuery with Angular without directives?
AngularJS has a lite version of JQuery and it is not like you have to go back ab initio to write directives - http://docs.angularjs.org/api/angular.element It is recommended not to do direct DOM manipulations and instead go with directives in AngularJS. There is the learning curve, but take the time to cross it.

Categories : Angularjs

Angular js ng-repeat and directives
Are you getting the item.starred value from a server? if so, then getting undefined is expected, because the directive is initailized before the data returned from server. I would suggest to use CSS to show the Red star instead of using javascript hide and show event. Alternatively, you can use angular watch to observe the change of the Item value and run the javascript code.

Categories : Javascript

angular js dom manipulation with directives
I dont think this is the right use of directive, as the directive should be used to affect the functionality of element on which it is defined in most of the cases. What you can try to do is in ObjectCtrl define a watch on title property, and then broadcast the message $scope.$watch('object.title',function(newValue) { $rootScope.$broadcast('titleChanged',newValue); //You can pass any object too }); If you header is contained inside a controller catch the event $scope.$on('titleChanged',function(args) { //Code to handle the title update }); The html for header should have binding expression for title <div class="headerdiv"> <h3 class='headerclass'> <a href="">{{title}}</a> </h3> </div> Note: I am not sure about the structure of the html

Categories : CSS

re-compile angular directives dynamically
I think you want to use ng-include to add the code fragment into the DOM. This will compile the angular elements before loading the html so you can use directives like ng-click. Note that this will create a new child scope, so you won't have direct access to the controller's scope.

Categories : Jquery

Angular, ng-repeat to build other directives
This is one possible alternative to your idea. The idea is to append the directive you defined in page object for each html element inside the ng-repeat. Please take a look at the demo. Hope it helps. <div ng-app="myApp" ng-controller="appPageController"> <ul> <li ng-repeat="page in pages" app-pages></li> </ul> </div> .directive("appPages", function ($compile) { console.log('into pages'); return { replace: true, link: function (scope, elements, attrs) { var html = '<div ' + scope.page.directive + '></div>'; var e = angular.element(html); elements.append(e); $compile(e)(scope); } }; }); Demo

Categories : Angularjs

"angular way" for dynamically adding directives
Since you asked a general question, let me give you a general answer. It should be helpful :) AngularJS is model/data driven, and if you want to make any change to the UI, the first thing you may think is how to achieve it by changing data. Given this idea, we can implement it like this: Define a ng-repeater, which should render tabs for a list of Tab objects called MyTabs, for instance. When you want to add a new tab, then create a tab object and add/push it to MyTabs. AngularJS will magically render it on the UI, thanks to the 2-way data binding.

Categories : Angularjs

Angular directives not rendering as expected
This is because you're trying to get 2 directives in the same level to use a different scope. Using, for example, a span to separate them fixes the problem http://jsfiddle.net/S2cQD/6/

Categories : Angularjs

Testing Angular Directives with their own controllers
The way you'll end up accessing the controller in this case is by using the function the controller is placing in its scope from the HTML snippets that will form your test inputs. Note: The use of a jasmine spy may be overkill here, and I didn't take the time to look up the right methods for matching the arguments to $location.path() and/or $location.search(), but this should be enough to help you find the hook into a place for observation that you're looking for. 'use strict'; describe('Directive: Search', function() { var element, $location; // Load your directive module with $location replaced by a test mock. beforeEach( function() { module('myapp.directives'), function() { $provide.decorator('$location', function($delegate) { $delega

Categories : Angularjs

Angular JS inspect elements in directives
There is a plugin for the dev tools called Batarang that is life saving. Check out this video for usage.

Categories : Javascript

Angular Dialog directives with Bootstrap 3
The example code you use works with Twitter Bootstrap 2.3.2. Why do you expect it should work with version 3 of Twitter's Bootstrap 3 too? Twitter's Bootstrap 3 is not backwards compatible with Twitter's Bootstrap 2.x. You will have to change / migrate your HTML. Cause you're using Angular JS, you will have to migrate your templates. Most of the works seems ready at the moment, see: https://github.com/angular-ui/bootstrap/pull/742. http://www.bootply.com/bootstrap-3-migration-guide will give you a impression of the changes you will have to make.

Categories : Twitter

Angular incorrect behaviours with custom directives
There is a small problem in your code you are using ng-transclude but you have not mentioned transclude property in directive so just change below directive definition and it will work both ways mumodule.directive('pvHello', function () { return { restrict: 'E', transclude:true, template: '<span ng-transclude>Hello </span>', replace: true }; });

Categories : Angularjs

Best practices for unit testing angular directives
The question is that directive is meant to bind together user, DOM and Scope. All scope handling shall be done inside a controller (probably bound to your directive through controller: property). So, you should have a unit testing separated for you controller, without even touching the directive part. Then you shall test your directive. As it's mainly about DOM handling, you might want to test your real template, not a mocked one. In order to get the elements, as you need, you can use find() method. If you don't use jQuery at all, you can load it (before your AngularJs dependency) on unit testing and use element.find('#one'), for example. All AngularJs elements are extended jQuery elements, if you don't have jQuery on your project, then Angular uses jQLite, and you'll not have the select

Categories : Unit Testing

How to bind boolean values in angular directives?
Create a scope on the directive that sets up bi-directional binding: app.controller('ctrl', function($scope) { $scope.list = { name: 'Test', collapsed: true, items: [1, 2, 3] }; }); app.directive('list', function() { return { restrict: 'E', scope: { collapsed: '=', name: '=', items: '=' }, template: '<div>' + '{{name}} collapsed: {{collapsed}}' + '<div ng-show="!collapsed">' + '<div ng-repeat="item in items">Item {{item}}</div>' + '</div>' + '<br><input type="button" ng-click="collapsed = !collapsed" value="Inside Toggle">' + '</div>

Categories : Angularjs

Angular Maintain List of Directives in Order
"I want to maintain a list of directives on a page in the order they appear in the dom." Can these methods help you? Priority AngularJS finds all directives associated with an element and processes it. This option tells angular to sort directives by priority so a directive having higher priority will be compiled/linked before others. The reason for having this option is that we can perform conditional check on the output of the previous directive compiled. In the below example, I want to add btn-primary class only if a div has btn class on it. <div style='padding:100px;'> <div primary btn>Random text</div> </div> Please note that the default priority if not set will be zero. In this example, btn directive will be executed before primary. Play with the demo!

Categories : Javascript

MVC4 and KendoUI Grid. Problems connecting to datasource (KendoUI OpenSource)
Please try with the below code snippet. Let me know if any concern. VIEW <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script> <div id="Grid"> </div> <script> $(document).ready(function () { var dataSource = new kendo.data.DataSource({ transport: { read: { url: "Home/GetDummydata", dataType: "json" } } , schema: { data: function (data) {

Categories : Asp Net Mvc

Angular custom validator directive breaking other directives
The reason ng-disabled in not working on inputB is that you are creating a new scope through your directive: scope: { customValidator: '=' } To keep your model inputB in the same scope as inputA you can do something like this: app.directive('customValidator', function() { return { require: "ngModel", scope: false, link: function postLink(scope, elm, attrs, ctrl) { var validator = function(value) { customValidator = scope[attrs["customValidator"]]; if(customValidator(value)) { ctrl.$setValidity('custom-validator', true); return value; } ctrl.$setValidity('custom-validator', false); return undefined; }

Categories : Validation

Angular element directives not displaying when using self-closing tags
I've run into the same problem recently and managed to fix it by not using self-closing tags. Try <add-player></add-player> instead of the self-closing version. I don't know why self-closing tags don't work with dashes in the directive's tag name. Did a quick research back in the day and didn't find anything on the HTML/XHTML side. Perhaps a bug/limitation in Angular?

Categories : Angularjs

KendoUI Editor Template Issue With KendoUI Grid
This is likely markup added by BrowserLink. I recommend you disable it for this scenario. http://www.poconosystems.com/software-development/how-to-disable-browser-link-in-visual-studio-2013/

Categories : Asp Net Mvc

Angular doesn't work in IE 8, can't create a custom element for my directives
You should read this article about using Angular with IE8 and earlier. There are some tricks you need to know about. Whenever I target IE8 with Angular, I avoid writing element directives and stick with attribute directives instead.

Categories : Javascript

Do we need to unbind event listeners in directives when angular starts to destroy?
The Angular documentation for scope destroy, implies that you do need remove DOM events. http://docs.angularjs.org/api/ng.$rootScope.Scope#$destroy Note that, in AngularJS, there is also a $destroy jQuery event, which can be used to clean up DOM bindings before an element is removed from the DOM.

Categories : Jquery

Angular directive with isolated scope "breaks" other directives (ng-required, ng-disabled)
The issue is that a scope applies to an entire DOM element (i.e., <input> in this case), and my-directive is creating an isolate scope that is then applied to ng-disabled and ng-required. The isolate scope doesn't prototypically inherit from the enclosing scope, so isActive isn't visible within it. You can map that scope property into the isolate scope by explicitly providing it as an attribute on the isolate scope, and then referencing the local version of the attribute from ng-required and ng-disabled. E.g., in the directive definition: scope: { myActive: '=' } The '=' sets up a 2-way binding to the expression given in the my-active attribute on that element, with local name myActive. In the <input> tag: my-directive my-active="isActive" ng-required="myActive" ng-disa

Categories : Angularjs

How to use Angular directives ng-click and ng-class inside Leaflet marker popup
Your issue comes from the fact that you are manually creating some DOM, which was not compiled by AngularJS. In those cases, you have to manually compile and link the element. The code would look like this: var html = '<br><span ng-class="thumbsUpClass(item)" ' + 'ng-click="addChoice(item,set)"><span class="popup-container"><span ' + 'class="icon-stack thumbs-up-stack"><i class="icon-sign-blank ' + 'icon-stack-base"></i><i class="icon-thumbs-up"></i></span></span></span>', linkFunction = $compile(angular.element(html)), newScope = $scope.$new(); newScope.item = hotelsSelectedDates[i]['hotels'][s] newScope.set = hotels var marker = L.marker([51.5, -0.09], {icon: blueIcon}).bindPopup(linkFunction(newSco

Categories : Javascript

How does angular application handle refresh page and could we use $history on loading directives
There is probably no way to preserve any javascript variable through a page reload and $rootScope is just a javascript variable. It seems though that what you are looking for is a way to make your application "start from the same point" that it was left at when a page was reloaded. I would recommend you to get familiar with notion of state. Every application can be viewed as a set of states and transitions between them. Every user interaction or any other actions that happen within applications either change the state of application or keep it in the same state. For example: clicking a user link from a list of users changes the state from "view users list" to "view user details for user with id=213", clicking an "Edit" button on "view user details for user with id=213" changes state to

Categories : Angularjs

Using Angular JS directives to create a domain-specific language for forms (with binding)
I'd take the silence thus far on your post as general approval. Nobody has much to add. All your general principles make sense to me, and you're doing a nice job of using declarative property names to make your components reusable. For that reason, I won't be surprised if somebody comes along and tags this with 'not appropriate', as there isn't much of a concrete technical answer to your question. But, that's 'cause you seem to be doing it right. Cheers.

Categories : Angularjs

GWT & Angular JS Integration
Technically, yes. No one said it was easy though. See https://github.com/cromwellian/angulargwt, announced in https://plus.google.com/110412141990454266397/posts/AYmRTDHeAZT and https://plus.google.com/110412141990454266397/posts/G1v6j6Pri5u

Categories : Gwt

angular js with php integration
I think you should separate backend and frontend and treat them as two separated application. Both apps should communicate with each other by sending ajax request (front) and respone data in json format (backend). In my opinion it's the best way to handle this.

Categories : PHP

D3 Integration with Angular: "Error: Invalid value for attribute x"
Looks like this was related to this issue: https://github.com/angular/angular.js/pull/2061 It was solved in that issue as well. SVG elements use an XML-based schema, and are namespaced, and as such have validation rules. Certain attributes can't take an Angular interpolated directive because they expect a numeric value, and the browser validates this before Angular ever has a chance to catch it (even if the element is created and not appended to the DOM yet). If anyone runs into this issue, hopefully this answer will help.

Categories : Angularjs

Angular.js and Play Framework 2.1 Integration with helper functions
As I'm sure you discovered, you can't directly make a Scala Symbol with a dash like 'some-word. Instead, just wrap it: scala> Symbol("ng-controller") res4: Symbol = 'ng-controller

Categories : Angularjs

PhantomJS integration testing with angular against live backend
For E2E testing with a real back end, I would consider using Protractor. As far as I know, ngMock and ngMockE2E are both made to fake a connection to a real server. With these libraries you can unit test your Angular project so that it works isolated. Note that it is a bit more work to setup E2E testing with Protractor if you start from scratch. There are however also starter projects (Yeoman), which already have this setup for you. You could use generator-angular-gulp for example for your application, or you could have a look how they have set things up.

Categories : Angularjs

How to create reusable AngularJs directives that copy existing directives
Bind a controller and inject $scope for ease. .controller('Amount', ['$scope', function($scope) { $scope.myMoney = '2'; }]) .directive("amount", function(){ restrict: 'EA', replace: true, controller: 'Amount', template: "<div class='amount'><input type='text' ng-model='myMoney'/></div>", //Cleaner to include as URL if the partial is bigger. //templateUrl: '/views/amount.html', link: function(scope, controller) {} });

Categories : Angularjs

Integration of Yeoman's angular generator with backend (Rails or Sails)
You should take a look at this. http://www.emmanueloga.com/2013/07/23/Using-AngularJS-with-a-Rails-backend.html

Categories : Ruby On Rails

Angular.js Unit/Integration Testing - Trigger Link Function
It turns out that I have to initialize the module containing the factories stringEntryGenerateTemplate and stringEntryGenerateLinkFn, which is the same module that contains the userWrapperUsername directive by adding this into my test case: beforeEach(module('userWrapper', function() {})); where userWrapper is the name of the module. So the test case becomes: describe('UserWrapper Table string entry', function() { var $scope , $compile; beforeEach(module('userWrapper', function() {})); beforeEach(inject(function($rootScope, _$compile_) { $scope = $rootScope.$new(); $compile = _$compile_; })); it('should be in stateDisplay if the value is non empty', function() { var userWrapper = { orgData: { student

Categories : Javascript

How do you not override other angular directives when using isolate scope and still being able to call methods in the scope?
If you want allow any global directive - don't declare private scope. If you want allow only few directives, add links in scope declaration: scope: { onClick: "&", ngShow : "&" }, To your question in comments: Declare controller in directive and declare method in this controller. Then in directive template assign ng-click to this method. var def = { restrict: 'A', controller: function($scope){ $scope.callMe = function(){ console.log('foo'); } } } in template: <div ng-click="callMe()">content</div> This method will be accessible only inside your directive.

Categories : Angularjs

Same origin policy response in Angular JS and Spring security OpenId Integration
You are sending a simple HTTP request to your openid authenticator(Either of Google,Yahoo,MyOpenID,Facebook etc.) Which on return provides you their page to enter your credentials or choose from your logged in accounts(in case of multiple accounts logged in). As soon as you enter your credentials or select your account to login, the request is redirected as a HTTPS request to the openid authenticator and that authenticator will authenticate you and return you your unique openid return url. In your case a simple HTTP request (http, your-website.com, 80) was raised from your angularjs application which was then redirected to a secure HTTPS request (https, your-website.com, 443) to authenticator, which turns out to be a "same origin policy" issue and you see a Response code 0. To solve th

Categories : Javascript

post link vs pre link in Angular js directives
The only time you'd want to use a pre link is when you need to perform some preparation on the scope before any child elements compile. My team has used it when writing a grid directive to define the grid object on the scope and setup some of its properties that are needed before any of the child row and cell objects are compiled. Hope that helps!

Categories : Angularjs

Why does less directives/more html take longer to compile than more directives/less html?
EDIT - your repeater directive does nothing special - it is just a wrapper for ng-repeat. To understand why repeater is faster than manipulating the DOM from the controller, you need to understand how ng-repeat works, what are compilation and linking phases. AFAIR Miško Hevery - has a talk about this here http://www.youtube.com/watch?v=WqmeI5fZcho There are few things you are doing in your example that cause it to be slower than angular ng-repeat Manipulating DOM in controller - don't do that! This practice is very bad! The reason ng-repeat is faster in this case is because it compiles the DOM once and only produces copies of the repeated element for each element in the array. In your case, you are creating element from string after the DOM has been rendered, then you modify the DOM s

Categories : Angularjs



© Copyright 2017 w3hello.com Publishing Limited. All rights reserved.