Can onbeforeunload event be watch by $watch in angular js?

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. }) ...

how to separate scopes without isolate scope?

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...

Covert encoded HTML in string to plain text for Input Fields using Agular

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)...

AngularJS outputting Javascript in a directive

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' }); } ...

How to access wrapped variables in a directive?

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...

How to pass the result of a function call to a directive?

angularjs,angularjs-directive

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',...

Angular scroll directive

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...

How to access ng-repeat item object into directive and child scope?

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...

pass callback to directive - angularjs

angularjs,angularjs-directive

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> ...

Angular JS service dependency injection error

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:...

Angular directive not applied on change of the value

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)...

How to apply ng-class using String syntax and array syntax?

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...

Detect if directive was removed from DOM

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...

Dynamically build table after it recieves information from service

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">...

Angular directive does not call parent scope function

angularjs,angularjs-directive

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); }); ...

Improve slow angular directive

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...

AngularJS custom directive not updating model with chosen file

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....

The href doesn't refresh when the ui-sref changes

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', {...

Detecting non-assignable values in angular directives

angularjs,angularjs-directive

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)....

Accessing parent Controllers scope within a directive that uses ControllerAs and scope:true

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...

Angular understanding the link function

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...

ng-switch is not working as expected

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...

Pass scope to element.after()

angularjs,angularjs-directive

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....

Angular JS Filter Group Select Filter

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; }...

Adding directives to an element using another directive

angularjs,angularjs-directive

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...

Angular Multiple ngIncludes with Transclusion on Page Losing Scope(?)

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")...

Same “controller as” name in angular js directive breaks function in parent controller

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 {...

Running script within ui-router TemplateURL

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...

How to create dynamically $scope variable and function in angular JS

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 ]; } ...

Limiting $scope in AngularJS

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).

Angular directive which isn't present in the DOM

angularjs,angularjs-directive

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...

Angularjs $watchCollection on $rootScope not triggered when values updated from directive

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) {...

Directive with transclude, data binding not working in templateUrl

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)....

Angular directive that requires another directive that uses an Attribute defined controller

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...

How to get value from ng-repeat when event not from element within ng-repeat (i.e. not ng-click)

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...

How to make sibling directives communication work( communication between certain specific directive)

angularjs,angularjs-directive

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...

why array become blank after splitting into multiple small array?

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...

AngularJS: Cannot get my directive working

angularjs,angularjs-directive

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...

Confuse about the AngularJS scope when multiple directives share same element

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...

Pass variable from directive to controller

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...

Is it a good practice to write several times ng-cloak for several angular expression to avoid being shown on page load?

angularjs,angularjs-directive

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"...

loading ng-grid with ng-click

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'...

how to show alert when user scroll to top of div in angular js?

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');...

How can I unit test a controller in an AngularJS Directive?

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...

KendoUI Popover $compile issue

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...

How Do I call and pass data to a Directive from a Controller Angular

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 })...

why margin-right is not working in ionic + angular js

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%...

why float right is not working also used important?

javascript,angularjs,css3,angularjs-directive,ionic-framework

Replace float:right with position: absolute; right: 10px; http://plnkr.co/edit/u89uQlz7VOGiznLmAoDj?p=preview...

Build dynamic rectangle with Angular directive

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...

How to use an isolated scope property properly?

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',...

AngularJS proper events biding with parent and child directives

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...

password check directive elem.add error

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...

Is this a “Deferred Antipattern”?

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...

scope.$observe is not a function in an AngularJS Directive

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); }); } ...

AngularJS - binding/linking two directives together

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...

How to show a hidden tag when clicked on an item