javascript,angularjs,angularjs-directive,angularjs-scope
How about this: $scope.$on('$locationChangeStart', function( event ) { var answer = confirm("Your message...."); if (!answer) { event.preventDefault(); } }); With $watch which I think you don't need it in here. Something like this: $scope.$watch(function(){ return $location.path(); }, function(newPath, oldPath){ // Compare it, and trigger your message function. }) ...
javascript,angularjs,angularjs-directive,isolate-scope
As mentioned in the comments you could use: scope: true However I would like to just point out one area of caution if you do take this approach: Any object based property on the scope, if the inherited (i.e. new scope) created by this directive changes a property on the...
javascript,html,angularjs,angularjs-directive,angularjs-filter
The ngSanitize solution works well for display fields but not for edit/input fields. I was able to answer my primary question of converting HTML to plain text in a input field by creating a custom directive. Solution posted on js-fiddle http://jsfiddle.net/egrendon/xa8cseoc/22/ var app = angular.module('myApp', ['ngSanitize']); app.controller('LoginController', function ($scope, $sce)...
javascript,angularjs,angularjs-directive,morris.js
You need to add link function that will do the chart initialization directive.link = function(scope, element, attrs){ new Morris.Area({ element: element, //here you can attach direct element data: scope.data, ykey: scope.ykeys() labels: scope.ykeys(), hideHover: 'auto', pointSize: 2, resize: true, data: 'fuckyou' }); } ...
angularjs,angularjs-directive,angularjs-scope,angular-directive
Binding has to be one to one, you cannot do that. Yes, you will have to access the arrays inside your directive. myApp.directive('myDirective', function() { return { restrict: 'E', scope: { myData: '=' }, link: function(scope, elem) { scope.arrayOne = scope.myData.array1; scope.arrayTwo = scope.myData.array2; } }; }); You can directly...
Try using one-way binding (&) instead. That will attach a getter function to your directive scope, you can use that function to get the result of the bar function. See below: var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.bar = function() { return { baz: 'qux' }; }; }).directive('myDirective',...
angularjs,angularjs-directive,responsive-design,angular-ng-class
As you are using isolated class, your directive scope is different scope than you controller scope, controller scope will not get inherited to directive scope because scope: {..}, As you want to change flag of parent scope you need to pass that value inside your directive with = which will...
javascript,angularjs,angularjs-directive
In your controller add a property to store the selected item: $scope.itemClicked = {}; In the link function, in your directive, you can get the selected item from the element: link: function(scope, element, attributes) { scope.itemClicked = element; } I have updated the plunker here: http://plnkr.co/edit/YtHePqSGZk9ja40sygG9?p=preview...
You have defined onFinish on the directive's scope, you should use it like on scope, so instead of: attrs.cb.onFinish() do scope.onFinish() Also, if you define it like this: scope: { onFinish:"&" }, you should pass it into the directive this way: <div add-animation onFinish="test()"></div> ...
angularjs,angularjs-directive,angular-resource,angular-services
You are not injecting the $q service. webAppValidation.directive('checkUsername', ['$q','services', ... I would write it like this webAppServices.factory('usersService', ['$q','$http', var endPoint = 'http://localhost:8080/api/user'; function ($q, $http){ var _getUsers = function(){ var deffered = $q.defer(); $http.get(endpoint) .then( function(data){ deffered.resolve(data);}), function(data){ deffered.reject(data);}) ).catch(function(error){ $q.reject(error);}); deffered.promise; } //... //the other methods //... return{ getUsers:...
javascript,angularjs,angularjs-directive
In your code, the link function is executed only once so the value is updated only when the directive instance is created. Since you want to have a watch of its value and keep updating the text you can use $observe() var app = angular.module('my-app', [], function() {}) app.controller('AppController', function($scope)...
angularjs,angularjs-directive,ng-class
you have added the ng-model="style" in input. So what ever you type in the input that will become the class for the 'p' tag because ng-class="style". check this fiddle http://jsfiddle.net/devjit/wdtk370z/4/ And Type 'style', 'style1', 'style2' in the input field. you will understand what is happening. <div ng-app> <p ng-class="style">Using String...
javascript,angularjs,dom,angularjs-directive
In the directive, when an element is removed from DOM, $destroy event is emitted. Inside your directive's link function, you can do this:- element.on('$destroy', function() { // do stuff }); For more information and complete example, see documentation here EDIT: See this plunker to see $destroy in action. Here, I...
javascript,html,angularjs,asynchronous,angularjs-directive
Sounds like you may be able to use ngShow and wait for your data to resolve on $scope.colors This should delay showing your table until the call is complete. Try the following... <table class="table table-bordered table-striped" ng-show="colors" class="ng-hide"> <thead> <tr> <td>one</td> <td>two</td> <td>three</td> </tr> </thead> <tbody> <tr ng-repeat="color in colors">...
Inside your directive code you are calling onSelect using attrs.onSelect change it to scope.onSelect. attrs.onSelect will just give you the string value iconSelected(). You need the function reference which will be available in the isolated scope which is created by the directive. element.find('input').change(function() { scope.$apply(scope.onSelect); }); ...
javascript,angularjs,angularjs-directive
The slowness you're experiencing could be due to the fact that after the window has been resized, a digest cycle isn't triggered. The fact that the view changes as all I suspect is due to the fact the digest cycle is later triggered by something else. To fix this, you...
javascript,html,angularjs,angularjs-directive
There are a few problems with your code. You do not need to do the isolate binding for ngModel as you are already requiring ngModel in your directive. You don't even need to use isolated scope at all. Generally when you create a attribute directive, you shouldn't use isolated scope....
javascript,angularjs,angularjs-directive,angularjs-ui-router,interpolation-directive
I don't think you can use template tags like that in the ui-sref. I think you need to create a state and pass the dynamic reportSelected in like you did with the profile one. $stateProvider .state('dashboard.hive-reports', { url: '/hive-reports', template: require('./hiveReports.tmpl.html'), abstract: true, controller: 'HiveReportsCtrl as hiveReports' }) .state('dashboard.hive-reports.report', {...
Updated Programmatic way to detect this (instead of having one more attribute) is using $parse fn. This is how angular does it to check and throw the error. It tries to parse the two-way binding attribute and if it does not have an assign attribute it throws the error. ($parse($attrs['focusWhen']).assign)....
angularjs,angularjs-directive,angularjs-scope
Simply use the controllerAs syntax when you instantiate your MyController like so. <!-- Notice the "as vmMy" syntax : Now everything can be accessed via "vmMy." --> <div ng-controller="MyController as vmMy"> <my-directive></my-directive> </div> Now anytime you use vmMy. notation it'll access things from MyController's scope! So your template can now...
javascript,angularjs,angularjs-directive
This line scope.info = attr.article; is redundant, since you have access to article via the two-way binding =article. So you can replace all occurrences of info with article in the template, since that is available in scope. You also need to remove the curly brackets from <lb-article article='{{myObject}}'> </lb-article> for...
angularjs,angularjs-directive,angularjs-scope,ng-switch
Here is a plunker. Angular kicks off a digest cycle when there is a change to the model (which is why after you interacted with the UI in some way you noticed it update). A change in a closure variable inside a service is not part of the model, so...
You could try creating an angular element and compiling it against the scope you want it to have with $compile e.g. var newElement = angular.element('<div data-autocomplete-results></div>'); element.after($compile(newElement)(scope)); Also you would need to do this in the link function, as scope is unavailable during the compile phase of the digest cycle....
javascript,angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat
Well I didn´t change the structure of the $scope.users but you need review because i donñt think is the best way. The important here: http://codepen.io/luarmr/pen/YXVqqp ng-repeat="user in users | filter:search" and you need define the search filter: $scope.search = function(user) { if ($scope.filter === undefined ) { return true; }...
You need to use $compile service to achieve this. See this answer. For your case it should go like this. angular.module('myModule', []) .directive('menuItem', function ($compile) { return { restrict: 'A', template: '<a ng-href="{{menuItem.link}}">{{menuItem.name}}</a>', scope: { menuItem: '=' }, compile: function (element, attrs) { element.removeAttr('menu-item'); element.attr('ng-class', '{active : menuItem.isActivated()}'); var fn...
javascript,angularjs,angularjs-directive,requirejs,angularjs-ng-include
Turns out I was able to fix it by changing my recompile function slightly. Using the $controller service and putting the $ngControllerController data attribute on the children is the main idea that did it. function recompiler() { var ctrl = $elem.attr('data-recompile-controller'); $elem.attr('data-ng-controller', ctrl); // This is for aesthetics only $elem.removeAttr("data-recompile")...
javascript,angularjs,angularjs-directive,angularjs-controller
The problem you're facing seems to be related to the fact that the directive is being executed on the same scope as the scope where the controller is defined as vm. What you need to do is to create a new scope within the directive. app.directive('testDirective', function() { return {...
javascript,angularjs,angularjs-directive,angular-ui-router
It's not clear, but I assume the issue is that the script tags in the HTML you're injecting aren't being run. Instead of using the standard script tag, you need to instead create a directive that allows you to do this. See Paolo's answer on this page for instructions on...
angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat
You do know that in javascript: obj.property === obj["property"] So if you really want to, you can: <td ng-repeat="list in listnames.name track by $index" class="smallbox_{{$index}}" ng-class="{'showblock': isbox_{{$index}}, 'hideBlock': !isbox_{{$index}}}" ng-click="isshowhide_new($index)" > And then: $scope.isshowhide_new = function(i){ $scope['isbox_' + i ] = !$scope['isbox_' + i ]; } ...
javascript,angularjs,angularjs-directive,angularjs-scope
$scope variables aren't global; they are specific to the controller. If you want variables that are specific to each page, put a controller on each page (and don't add a controller to a parent element since its scope will be inherited).
Try this: app.directive('empty', function () { return { restrict: 'E', replace: true, transclude: true, link: function (scope, element, attrs, ctrl, transclude) { transclude(scope, function (content) { element.replaceWith(content); }); } }; }) Or you can likewise use scope.$parent (depending on which scope you need), e.g. transclude(scope.$parent, function (content) { Working plunker...
javascript,angularjs,events,angularjs-directive,angularjs-watch
Your actual problem is you are update $rootScope from the event which is outside the angular context, so its obivious that angular binding will not update because digest cycle doesn't get fired in that case. You need to fire it manually by using $apply() method of $rootScope el.bind('click', function(evt) {...
angularjs,angularjs-directive,angularjs-scope,directive
That is strange, scope binding should work in both cases. Be sure that your template file is not cached by the browser (and using an old version of it)....
javascript,angularjs,angularjs-directive
If you are getting the controller as an attribute, the attribute name needs to be the name of the directive: <greeting greeting="GreetingController" finnish="" hindi=""></greeting> See this plunker...
javascript,angularjs,angularjs-directive,angularjs-ng-repeat,angular-filters
function Ctrl($scope, $filter) { var suggestedTags = ['javascript', 'angular', 'android', 'java', 'c++', 'c#', 'object-c'] $scope.selectedIndex = 0; $scope.filteredTags = suggestedTags; $scope.selectedTags = []; $scope.checkKeyDown = function(event) { if (event.keyCode === 40) { //down key, increment selectedIndex console.log('down'); event.preventDefault(); if ($scope.selectedIndex + 1 !== $scope.filteredTags.length) { // check to see...
The most important thing to note here is that I think you want to use ng-class Since you are creating both directives in an ng-repeat, I assume you are iterating over a list of objects (even if they are two separate ng-repeats, if you iterate over the same list of...
angularjs,angularjs-directive,angularjs-scope
You are directly assigning object to other object, so that will cause change in any of the object will update other object value. Use angular.copy instead of assigning object directly, that will create a new clone copy of that object will returned. var test=angular.copy($scope.name); Forked Plunkr...
Simply change your directive name to camelCasing, which angular will translate to my-widget. In addition, the jQuery $ alias is not available and shouldn't be used with angular. You already have the element, so interact with it directly, using element.css() to change css properties. In addition, based on the comments...
angularjs,angularjs-directive,angularjs-scope
1) It will be something to do with $compile order which where directive with higher priority will be executed first. ngRepeat has priority of 1000 which is higher than custom directive which is 0. But for your case it is due to ng-bind-html {{d.id}} that you use will not work...
javascript,angularjs,angularjs-directive,angularjs-scope,angularjs-controller
As you want to access currentScriptPath in your directive controller. You need to only attach that variable into your current scope inside link function of directive & that scope would be make currentScriptPath available to you controller TestController scope because you have used bindToController: true, in your directive. Markup <div...
The <input> does not take content, i.e. the {{model1}} is not inside the input, so the rule does not apply. You will have better luck with something like (I like closing the input tags inline, i.e. <inp[ut /> to make explicit the fact that inputs are empty): <input type="text" ng-model="model1"...
angularjs,html5,angularjs-directive,ng-grid
You can initialize the data with an empty array, so that ng-grid is proparly initialized, and then change the data on-click like this: $scope.myData = []; $scope.ngOptions = { data: 'myData' }; $scope.loadGrid = function(){ $scope.myData = [ { Name: "Moroni", Age: 50, Position: 'PR Menager', Status: 'active', Date: '12.12.2014'...
angularjs,angularjs-directive,angularjs-scope,ionic-framework,ionic
Angular will not provide you anything for this, you just need to bind a scroll event on your element. In my current project I have just created an event in my controller : var container = angular.element(document); container.on('scroll', function() { if (container.scrollTop() > 1000) { $('#scroll-top-button').addClass('show'); } else { $('#scroll-top-button').removeClass('show');...
javascript,angularjs,unit-testing,angularjs-directive,karma-jasmine
Make the controller by itself. Don't make it an anonymous function. So instead of { // ... some directive options controller: function() { // Your controller's logic } } Do something like this. { // ... some directive options controller: "MedPickerController" } And then define your controller separately just like...
angularjs,angularjs-directive,kendo-ui,angularjs-compile,kendo-tooltip
This isn't problem with kendoui-popover. The problem is unneeded scope.$apply kendo does in widgets. They will remove that in newest version: Forum discussion They committed fix today: gitbhub commit...
angularjs,laravel,angularjs-directive,controller
It looks like it's going to be something reused so I'd strongly suggest to use service/factory I've made few examples for you of the way to pass data to directive app.service('postService', function postService($http) { var postDataMethod = function (formData) { $http.post('http://edeen.pl/stdin.php', formData) .success( function (data) { service.response = data })...
javascript,jquery,angularjs,angularjs-directive,angularjs-scope
The css in ionic.css sets elements with the class "row" to a width of 100%. When you add margins, the width of your row becomes 100% + 5% + 5%, and the row is wider than its container. There are several ways to fix this. You can remove width: 100%...
javascript,angularjs,css3,angularjs-directive,ionic-framework
Replace float:right with position: absolute; right: 10px; http://plnkr.co/edit/u89uQlz7VOGiznLmAoDj?p=preview...
javascript,angularjs,d3.js,angularjs-directive
You are missing some basics here: You don't have a controller. The variables you are watching are not part of your directive but they should be part of that missing controller. Since these variables aren't part of the directive, there's no need to return them into it's scope (again, they...
angularjs,angularjs-directive,angularjs-watch,controlleras
You could use $watch inside your directive that will watch on change in value & will fire the code which you want. Code app.directive('myDirective', [function() { return { restrict: 'E', templateUrl: 'template.html', scope: { item: "=" }, controller: ['$scope', 'ExtendedItemFactory', function($scope, ExtendedItemFactory) { this.extendedInfo = ExtendedItemFactory.get({ id: $scope.item.id }); $scope.$watch('item',...
javascript,angularjs,events,angularjs-directive,event-propagation
As per your current structure you parent element and child element both has click event. When you clicked on any of the inner element it call the click event of that element and then it bubble ups the event as parent has the same event. To prevent this behavior you...
javascript,angularjs,validation,events,angularjs-directive
Your jQuery is missing. But I would suggest you to use scope variable inside you directive that you have access to scope of controller to your directive, Because is not creating isolated scope. Code angular.module('myModule') .directive('pwCheck', function() { return { require: 'ngModel', link: function (scope, elem, attrs, ctrl) { var...
angularjs,angularjs-directive,angularjs-service,angular-promise
Is this a “Deferred Antipattern”? Yes it is. 'Deferred anti-pattern' happens when new redundant deferred object is created to be resolved from inside an promise chain. In your case you are using $q to return a promise for something that implicitly returns a promise. You already have a Promise...
javascript,angularjs,angularjs-directive
$observe would be placed on an attribute. Check out the $compile.directive.Attributes docs for more information. In your example, you would do something like (asuming isEnabled is an attribute like is-enabled="true") ... link: function (scope, element, attr) { attr.$observe('isEnabled', function (value) { console.log('i observed...'); console.log(value); }); } ...
javascript,angularjs,angularjs-directive
The key issue revolves around your use of isolated scopes: scope: { selectedId: '=' }, With controllerAs binding: controllerAs: 'vm', What this essentially does, to put it basically, is it places the view model onto the directives scope, accessed through the alias you assign in the controllerAs. So basically in...
angularjs,angularjs-directive,angularjs-scope
You could use ng-show for your purpouse <li ng-class="{class : classVar==='Marketing' }" ng-click="changeClass('Marketing')"> <i class="fa fa-pencil" ng-show="classVar === 'Marketing'"></i> Marketing <i class="fa fa-times" title="Close" ng-show="classVar === 'Marketing'"></i> </li> <li ng-class="{class : classVar==='Sells' }" ng-click="changeClass('Sells')"> <i class="fa fa-pencil" ng-show="classVar === 'Sells'"></i> Sells Team Nestle <i class="fa fa-times" title="Close"...
ajax,angularjs,angularjs-directive,angularjs-scope,slickgrid
This is the because your controller and directive are both executing in parallel. What you need is make directive wait for controller to finish its API call. You can achieve this with help of using $emit. In controller, var response = some_json; $scope.$emit('controllerUpdate', response); In directive, enclose your code with...
angularjs,angularjs-directive,typescript
So I found a way to get it to work but it is not as elegant as I would have liked. angular.module('formDirectives', [], function($compileProvider){ $compileProvider.directive('catElement', ($compile) => { return new Element($compile); }); }) ...
javascript,angularjs,angularjs-directive
The best you can do is to write simple reusable directive. Here is a quick basic implementation: app.directive('inputDropdown', function($compile) { var template = '<input ng-model="ngModel">' + '<div class="dropdown">' + '<div ng-repeat="value in list">' + '<div ng-mousedown="select($event, value)">{{value}}</div>' + '</div>' + '</div>'; return { restrict: 'EA', scope: { ngModel: '=', list:...
angularjs,angularjs-directive,angularjs-scope,ionic-framework,ionic
Updated Plunker I took a little different approach then the others. There is a variable at the top of the controller called showitems. This controls how many items you want to show at a time. The counter variable will keep track of where how many items are shown. Initially, the...
angularjs,angularjs-directive,angularjs-scope,mapbox,angularjs-compile
You need to return the compile angular element instead of returning html of that element. Only returning the html will never carry the angular two way binding. By using compiled object you can keep your binding working. Code this.createPopup = function(marker) { var popup = "<mapbox-marker-popup" + "title = '"...
You have to respect the same order for your injections : controller : ['$scope','$element', '$http', '$attrs', '$transclude', function($scope, $element, $http, $attrs, $transclude) { $http.post($scope.url,$scope.urlParams).success(function (data) { }); ...
javascript,angularjs,angularjs-directive
My suggestion for you is to put your views folder inside the public folder:- bin node_modules public |-- js | |-- main.js |--views |-- template.jade |-- index.jade routes app.js package.json And then use app.directive('personRecord', function(http){ return { restrict : 'AE', templateUrl : 'views/template.jade', link : function(scope, ele, attr){ } };...
angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat
Here's a Plunker with everything working together. I have separated all of the pieces into individual JS files, as it was getting unruly: Plunker Search The built in filter will only return results from the current view data that the ng-repeat is displaying. Because you're not loading all of the...
javascript,angularjs,angularjs-directive
You need to change the first argument on the $watch, to be a function returning your variable, instead of the variable itself: scope.$watch(function () { return scope.animateWatch; }, function (nv, ov) { call(); }, true); Take a look here at the docs at the watch section....
javascript,angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat
You this would be available inside your directive scope thats why directive can access controller method by $scope it self so there is no need to pass controllerAs alias here. Only pass method name here. Instead of accessing the function by index anotation try using $eval on scope. Note You...
jquery,angularjs,angularjs-directive,angularjs-ng-repeat,datetimepicker
That is because you are running jQuery code to timepicker on element before the element contents gets rendered on html Better you should wrap your jQuery plugin code in directive and write bind timepicker to that element inside directive link function. Binding jQuery plugin from the directive is considered as...
javascript,jquery,angularjs,angularjs-directive
First of all, you don't want to append new content in textarea: it's not supposed to have HTML content in it and can't display it. Instead consider inserting error message right after the element. For show/hide functionality I would extract it into two separate functions and use them from inside...
html,angularjs,angularjs-directive,daterangepicker
Try wrapping plugin in directive, thumb rule in AngularJS, also load angular after jquery has been loaded Markup <input type="text" daterange name="daterange" id="daterange" ng-model="dateRange"/> Directive app.directive('daterange', function(){ return{ link: function(scope, element){ element.daterangepicker(); } } }) Demo Plunkr...
jquery,html,angularjs,angularjs-directive,angularjs-ng-repeat
The problem is ng-repeat renders all the div dynamically, and you are binding jQuery event at the start, at that time share-popup class element were not rendered on DOM, thats why those event don't get attached that element. You need to write your own custom directive that will restrict on...
angularjs,angularjs-directive,angularjs-scope
The first is the usual two-way data-binding, which means if you say x : '=' the attribute on the element has to be x as well. The second is an alternative to the first one with the difference that you can map the scope variable to a different attribute. For...
angularjs,angularjs-directive,angularjs-controller
The myCustomer directive is now on the Controller controller No, not at all. It has nothing to do with the controller. It just happens to expect a customer variable in the scope, and the controller happens to set such a variable in its scope. But you can use the...
angularjs,angularjs-directive,angularjs-scope,ionic-framework,ionic
you could try like this, i think the same you expected plnkr.co/edit/fHdnWwIRgi5jFLQlCWKs?p=preview
javascript,angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat
In the ShowViewAfterSuccess function you slice all invoice records to get just the ones to be displayed: $scope.invoice_records = $scope.total_invoice_records.slice(0, showitems); Then, in the setSort function you clear the invoice_records list and then set it with the whole list of invoice records (without slicing the first 25): $scope.invoice_records=$scope.total_invoice_records; That's why...
javascript,angularjs,angularjs-directive,angularjs-scope
You're not injecting $location in your controller here: ['$scope', function($scope, $location) ...] Add it to the injection list: ['$scope', '$location', function($scope, $location) ...] Your syntax for ng-class is fine....
angularjs,angularjs-directive,angularjs-ng-repeat,ionic-framework,ionic
4 solutions : with ng-class-odd and ng-class-even <div collection-repeat="item in items" ng-class-odd="odd-row" ng-class-even="even-row"></div> or with ng-class <div collection-repeat="item in items" ng-class="{'even-row':$even,'odd-row':$odd}"></div> or with plain css ion-scroll div.row:nth-child(even) {background: red} ion-scroll div.row:nth-child(odd) {background: blue} finally to avoid using odd and even helpers <div collection-repeat="item in items" ng-class="{white:$index%2 == 0,blue:$index%2 ==...
angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat
You need to update ng-show="b[$index].fieldNameOrPath===field.fieldNameOrPath" to ng-show="b[$index-1].fieldNameOrPath===field.fieldNameOrPath" And in your json, fieldNameOrPath property is different in a and b like in a it is "Sub" and in b it is "Subject", so either update a or b, so that property fieldNameOrPath is same at both the places....
html,css,angularjs,angularjs-directive,directive
The current way you are doing is correct but when you want to change the style of element you need to use actual DOM of that elemenet by doing tElem[0] which will have DOM of that div element. Code tElem[0].style.left = left+"px"; tElem[0].style.top = top+"px"; tElem[0].style.position = "absolute"; Using Style...
angularjs,angularjs-directive,angularjs-scope
HTML: <ul class="ul_nav"> <li ng-class="{class : classVar==='Marketing" }' ng-click="changeClass('Marketing')">Marketing</li> <li ng-class="{class : classVar==='Sells' }" ng-click="changeClass('Sells')">Sells Team Nestle</li> <li ng-class="{class : classVar==='MarketingTest' }" ng-click="changeClass('MarketingTest')">Marketing Test</li> <li ng-class="{class : classVar==='Marketing1' }" ng-click="changeClass('Marketing1')">Marketing </li> </ul> JS: $scope.changeClass =...
javascript,angularjs,angularjs-directive
I simply had to switch from Angular1.2 to Angular1.3, and now it works as expected.
angularjs,angularjs-directive,typescript
Try this way: class SetFocus implements ng.IDirective { //Directive settings restrict :string = 'EA'; scope : any= {}; //Take timeout argument in the constructor constructor(private $timeout: ng.ITimeoutService) { } link: ng.IDirectiveLinkFn = ($scope: ng.IScope, $element: ng.IAugmentedJQuery, $attrs: ng.IAttributes) => { //refer to the timeout this.$timeout(function() { $element[0].focus(); }, 0); }...
angularjs,filter,angularjs-directive
There is built-in limitTo filter doing exactly what you are trying to achieve. By the way on our projects we always ended up filtering arrays on-demand in the controller (or custom directive) so that the ngRepeat doesn't have to use any filters....
javascript,angularjs,angularjs-directive
Try to use filter instead of directive. Here's the JsFiddle link. Sample Codes: HTML: <div ng-app="myApp"> <ul ng-controller="YourCtrl"> <li ng-repeat="name in names"> {{name.name | customNameFormat}} </li> </ul> </div> JS: 'use strict'; var app = angular.module('myApp', []); app.controller('YourCtrl', ['$scope', function ($scope) { $scope.names = [ {name:'Doe, John'}, {name:'Naperi, Alberto'}, {name:'Last, First'},...
ngModelController.$parsers parses your value with every keystroke. Since you do not know when the user is ready with entering the value, you can't really parse the value on every update. Assuming you want to allow the values 5 5. 5.5 5:30 the parser is not the way you want to...
javascript,angularjs,angularjs-directive
The problem to solve this issue would be using dot rule of AngularJS, so that the object will for [**prototypal inheritance**][1]. For that you need to create and object and add thetextCommentin it, so the object will look like$scope.library={}thentextCommentwill be placed in it. Also you need to make addscope: true`...
javascript,jquery,html,angularjs,angularjs-directive
This is because the angular doesn't bind the directives if you append content like this, you need to $compile service to do this and this will bind the directives against your $scope so controller like, .controller('Controller', ['$scope', '$compile', function($scope, $compile) { $scope.showdiv = function(){ var compiledeHTML = $compile("<div my-Customer></div>")($scope); $("#d").append(compiledeHTML);...
angularjs,angularjs-directive,angularjs-scope
You can use bindToController (available from v1.3.x) setting of directive to bind values to controller instance instead of scope object. function myDirective() { return { restrict: 'E', scope: { value: '=' }, controller: MyDirectiveController, controllerAs: 'vm', bindToController: true, template: '{{vm.value}} - {{vm.foo}}' } } and in HTML you pass value...
angularjs,angularjs-directive,transclusion,angularjs-ng-transclude
The answer to this can be found by looking at the the git blame of compile.js: the commit that added futureParentElement is https://github.com/angular/angular.js/commit/ffbd276d6def6ff35bfdb30553346e985f4a0de6 In the commit there is a test that tests a directive svgCustomTranscludeContainer directive('svgCustomTranscludeContainer', function() { return { template: '<svg width="400" height="400"></svg>', transclude: true, link: function(scope, element, attr,...
angularjs,angularjs-directive,plunker
while calling a directive in html you should replacecamelcase in directives name like this, <element-directive></element-directive> and not as it is, <elementDirective></elementDirective> like you did. Hope this helps!!! PLUNKER see through the custom directives here...
There are a couple points to be made here, I think. I'll do my best to answer your question. Firstly, I just want to point out that restricting access on the front-end alone is not usually a good security practice (any code on the front-end can be manipulated by the...
javascript,angularjs,angularjs-directive,angularjs-scope,angular-material
Edited : the issue is with "transition-in" css class, if you remove it the hide works. Check the git for angular material, it seems $mdDialog using "transition-in" class to show the dialog and "transition-out" to hide it, so if you include "transition-in" then it will disable the hide....
ControllerAs exposes the controller instance on the scope under $scope[alias]. In your example, the scope looks (conceptually) like this: $scope = { $id: 5, myCtrl: { doAction2: function(){...} }, doAction: function(){...} } So, you can see why ng-click="myCtrl.doAction()" doesn't work. The Controller-As approach has some benefits over directly exposing properties...
angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat
As @Claies mentioned you should use apply(). Though the digest() would probably have worked as well.apply() calls digest() internally. He also mentioned that your variable that seems to be storing the page number gets reset to 0 each time you scroll. You should store that in a scope variable outside...
angularjs,angularjs-directive,angularjs-scope
Inside the templates you don't need to use scope. Replace this: template: '<input type="file" ng-model="xlsFile"><button ng-click="search({stuff: scope.stuff})">Search</button>' with this: template: '<input type="file" ng-model="xlsFile"><button ng-click="search({stuff: stuff})">Search</button>' You should also declare your function like this: angular.module('fileReaderModule') .directive('xlsReader', function($timeout){ return { scope: { search: "&" }, link: function(scope, e, attr) { e.bind('change',...
javascript,angularjs,svg,d3.js,angularjs-directive
ng-if is a directive, you can use this solution: How do I use angularjs directives in generated d3 html? The only supposition is that you d3 is already in a directive....
javascript,html,angularjs,angularjs-directive
I have added several modifications to your original code it has so many typos and misleadings. And I adapt it to be up-to-date with the last release of AngularJS (1.3.x) api. Directive myApp.directive('customValidation', function() { return { restrict: 'AE', require: 'ngModel', scope: { collection: '=', property: '@' }, link: function(scope,...
angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat,ng-repeat
Make $scope.innerComment an array of Booleans. $scope.innerComment = []; Now modify it in your view as ng-show="innerComment[$index]" This way you can set the value true for particular comment. $scope.showInnerComment=function($index) { console.log($index) $scope.innerComment[$index]=true; } Note: Whenever you add comment , push false in innerComment. ...
Markup <div multiple-form directive-data='directiveData' ng-attr-template-url="{{box.key == 'experiences'? 'experiences-form.php':'education-form.php'}}" item="item" forms="forms" form-name="{{box.key}}{{item._id}}" onsave="updateMultipleUser(box.key, item._id, $data)" onreset="formAction($formName, 'reset')" cancel="formAction($formName, 'cancel')" > </div> Then your templateUrl function would be templateUrl: function(tElement, tAttrs) { $timeout(function(){ //wait until the ng-attr evaluates a value. return...
javascript,angularjs,angularjs-directive,angularjs-scope,angular-ui-grid
You can access the sum for the certain column this way: $scope.gridApi.grid.columns[column_number].getAggregationValue() // Here I get 281568 I have created an example here: JsBin...