angularjs-directive | 易学教程

how to unit-test setInterval in karma angularjs

阅读更多关于 how to unit-test setInterval in karma angularjs

app.directive('shuffleBlocks', function($timeout){ return { link: function(sco,ele,att){ if (itemCnt <= 1) return; /*Trigger function*/ function triggerEvent(){ ... } ele.bind('click', triggerEvent); setInterval(triggerEvent, 5000); } } }) here I wrote the test var elem = '<div shuffle-blocks><div>'; elem = mockCompile(elem)(rootScope.$new()); setInterval(function(){ expect(......).toBe(....) }); Obviously this is not the right method, does anyone know how to test $timeout and setInterval in karma? tennisgent UPDATE: The proper method of mocking setInterval in an angular 1.2+ application is to

using Angular validation directives with Breeze blocks any input that is invalid

阅读更多关于 using Angular validation directives with Breeze blocks any input that is invalid

问题 If you add any of the angular directives for validation (ng-minlength, ng-maxlength, ng-pattern, etc.) to an input that is bound to a breeze entity it blocks any user input if found to be invalid. If the value from ng-model is initially valid it shows up, but if you change the value to something invalid the input field is cleared, the model is set to null, and you can't input anything that may be initially invalid. However if you copy a valid value into the field it shows. I would be fine

Proper way to pass functions to directive for execution in link

阅读更多关于 Proper way to pass functions to directive for execution in link

问题 I know we usually pass functions to directives via an isolated scope: .directive('myComponent', function () { return { scope:{ foo: '&' } }; }) And then in the template we can call this function like such: <button class="btn" ng-click="foo({ myVal: value })">Submit</button> Where myVal is the name of the parameter that function foo in the parent scope takes. Now if I intend to use this from the link function instead of template, I will have to call it with: scope.foo()(value) , since scope

AngularJS: Dropdown directive with custom ng-options

阅读更多关于 AngularJS: Dropdown directive with custom ng-options

I'm trying to create a dropdown directive where i want to specify the selects ng-options "option value" and "option description" attributes by specifying them with the directives attributes. See code for a better understanding... Here is my directive. This will obviously not work, but i think it will describe what i'm trying to do... app.directive('dropdown', function(){ return { restrict: 'E', scope: { array: '=' }, template: '<label>{{label}}</label>' + '<select ng-model="ngModel" ng-options="a[{{optValue}}] as a[{{optDescription}}] for a in array">' + '<option style="display: none" value=""

How to conditionally include script element in Angular

阅读更多关于 How to conditionally include script element in Angular

I'm trying to conditionally include a chat on my page: <body ng-app="myApp">  <script type="text/javascript" ng-if="expression"> window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s= d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set. _.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8"); $.src="//v2.zopim.com/?my-zopim-id";z.t=+new Date;$. type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script"); </script> </body> but it seems that the chat script gets executed before ng-if directive. How can I

Bind event to child element of directive in link function

阅读更多关于 Bind event to child element of directive in link function

Need to bind an event to directive's children which is prepared with ng-repeat in templateUrl. I am trying to bind the event in link function but the children are not yet prepared. Here is the plunker. Here I want to bind click event on li tag which are prepared with ng-repeat.But by the time, the link is executed, the li elements are not yet prepared. Can somebody please help. I've resolved the same problem with the angular $timeout link: function (scope, element) { $timeout(function () { element.on('click', '#Id', function () { console.log('inside event handler of the first child) }) }) }

prevent redirect behaviour in angularjs app

阅读更多关于 prevent redirect behaviour in angularjs app

When a user tries to click browser back button and dere is dirty data on the form, it shows a confirmation. Here is the angular js controller code function MyCtrl2($rootScope, $location, $scope) { $rootScope.$watch(function () { return $location.path(); }, function (newValue, oldValue) { if ($scope.myForm.$dirty) { var a = confirm('do you'); if (!a) { //how to prevent this redirect } } }, true); } MyCtrl2.$inject = ['$rootScope', '$location', '$scope']; But how to prevent the redirect on There are two DOM events at the root of this whole problem you're trying to solve: onhashchange and

Why does angularjs bootstrap datepicker pick one day before?

阅读更多关于 Why does angularjs bootstrap datepicker pick one day before?

I'm using angularjs bootstrap datepicker directive and when I set a date from model it picks a day before the selected date. <button type="button" class="btn btn-sm btn-default" ng-click="dt = '2014-09-24'">2014-09-24</button> Here is a plunk with the issue. Is there any solution? Antiga This is due to the way JS handles dates natively. AngularUI team mentions this in the docs. Here's one solution: Angular-UI One day is subtracted from date in ui-date For anyone needing a solution in the .NET Web Api world, this line worked well for me: GlobalConfiguration.Configuration.Formatters

How to handle Highcharts events from an AngularJS directive?

阅读更多关于 How to handle Highcharts events from an AngularJS directive?

Using an AngularJS directive, I am able to load a Highcharts graph. However, my event handler for clicking on a point is not being executed. http://plnkr.co/edit/pxU0IsBTrvcEwr2Znf5d?p=preview JS var app = angular.module('charts', []); app.directive('highchart', function () { return { restrict: 'E', template: '<div></div>', replace: true, link: function (scope, element, attrs) { scope.$watch(function() { return attrs.chart; }, function() { if(!attrs.chart) return; var chart = JSON.parse(attrs.chart); $(element[0]).highcharts(chart); }); } } }); function Ctrl($scope) { $scope.example_chart = {

Angularjs $http wait for response

阅读更多关于 Angularjs $http wait for response

I am a newbie to javascript/angularjs. I want to show a bootstrap popover when mouseover is done on some elements. I created a directive for that (function(angular, app) { app.directive('popOver',["$window","$http",function($window,$http){ return function(scope,elem,attrs){ elem.on('mouseover',function(){ console.log('mouseover'); var data = scope.$apply(attrs.popOver); console.log('in directive again'); console.log(data); }); }; }]); })(angular, app); the value of the directive is a function <span class="asdf" pop-over="getVCard(id)">name</span> the function vcard(id) is defined in my