angularjs-directive

HTML view with directive: <div click aaa="aaa()" action="action"></div> Controller: I like to pass function bbb() in $scope.action: app.controller('MainCtrl', function($scope) { $scope.aaa = function () { alert('aaa'); } $scope.bbb = function () { alert('bbb'); } $scope.action = 'bbb()'; }); Directive: app.directive('click', function () { return { scope: { aaa: '&', action: '&' }, template: '<button ng-click="aaa()">show aaa (work ok)</button>' + '<button ng-click="action">show bbb (not work)</button>' + '<br>How to pass ng-click action in variable into directive?' } }); I don't know how to

I am getting this error in the browser console in my code for an elapsed time calculator: Uncaught Error: [$rootScope:infdig] I calculate the elapsed time from the current time when the app starts. Here is my html: <div ng-app="time"> <div ng-controller="Ctrl2"> Elapsed time: <span my-current-time="[date,format]"></span> </div> </div> Here is the JavaScript code: function Ctrl2($scope) { $scope.date = new Date(); $scope.format = 'M/d/yy h:mm:ss a'; } angular.module('time', []) // Register the 'myCurrentTime' directive factory method. // We inject $timeout and dateFilter service since the

I'm trying to add a directive to my app, check out the demo here: http://plnkr.co/edit/XlmS8wIuyrwYXXaXbdPr?p=preview The code renders on the browser (Chrome 33) but the console still throws the error: Error: [$interpolate:interr] Can't interpolate:{{example_chart}} TypeError: Converting circular structure to JSON Anyone know why the console throws errors while still having everything else goes successfully? Just trying to understand the "why" even though the code seems to work. Here is the JS: var myapp = angular.module('myapp', ["ui.router"]) myapp.config(function($stateProvider,

Note: the suggested link is an answer to a question about a service, and doesn't give a clear explanation on how to solve this issue I'm trying to setup a karma test for my simple (and working) AngularJS autofocus directive: app.directive('autofocus', function ($timeout) { return { replace: false, link: function (scope, element, attr) { scope.$watch(attr.autofocus, function (value) { if (value) { $timeout(function () { element[0].focus(); console.log('focus called'); }); } } ); } }; }); This is my current test: describe('The autofocus directive', function () { var timeout; beforeEach(module(

In my app I have window instances. The app can contain multiple windows and windows can contain multiple views. The views are children of each window instance. The windows and view creator are directive with an isolated scope. I want the views to be loosely coupled to their parent window and not have to something like $scope.$parent module.directive('window', function() { return { restrict: 'E', replace: true, templateUrl: 'windowTemplate.html', controller: 'windowController', scope: { config: '=' }, link: function(scope, element, attrs) { } }; }); module.directive('view', function($compile,

In the code below, how does the angular directive 'myscroll' know what ng-repeat elements are being created? <myscroll> <div ng-repeat="a in arr">{{a}}</div> </myscroll> I know that the $last event is not fired to the parent directive, how can I solve this? myapp.directive("myscroll", function () { return{ restrict: "E", transclude: true, template: "<span class='left'></span><div class='mask' ng-transclude></div><span class='right'></span>", link: function (scope, element, attr) { scope.$watch("$last",function(){ console.log("ng-repeat rendered") }) } } }) A simple way to do it is to create a

I want users of my web application to be presented with an progress bar indicating current progress of loading files and scripts necessary. Preferably showing percentage, but a simple loader gif is an acceptable solution. What is the best way to implement a loader that could show an indication of percentage finished loading images, css and js in Angular, if at all possible? I'm thinking of having a small application whose only purpose is to load resources and indicate progress, and when all scripts and resources are finished, fire of some callback to boot angular (angular.bootstrap()). My

I'm trying to create a menu using angular. A menu item can have children requiring another ng-repeat to print the sub nav items. I'm noticing some strange behavior when attempting to insert an anchor tag within the 2nd ng-repeat. Link to fiddle: http://jsfiddle.net/npU7t/ <li ng-repeat="sub_menu_item in menu_item.sub_menu"> <a href=""> {{ sub_menu_item.title }} </a> </li> With { title: 'menu item with children', sub_menu: [ { title: '<-- empty anchor tag???' } ] } Results in <li ng-repeat="sub_menu_item in menu_item.sub_menu" class="ng-scope"> <a href=""></a> <a href="" class="ng-binding"><--