angularjs-directive | 易学教程

Reacting on angular events in a directive without injecting $rootScope

阅读更多关于 Reacting on angular events in a directive without injecting $rootScope

I wonder if you have an example of a directive code that reacts on angular events like $routeChangeError without injecting $rootScope in to it (to use $on in link function). It breaks in my opinion MV* pattern and "produces" smell-code (gives the possibility to manipulate root scope in a directive). Thanks in advance. If you are only listening for events, you don't have to use the $rootScope ; do e.g. $scope.$on("$routeChangeError") on the scope of the directive, from either controller or link function. You see the "$routeChangeError" is broadcasted from the $rootScope , so all children

AngularJS : Why ng-model value not updating in scope variable

阅读更多关于 AngularJS : Why ng-model value not updating in scope variable

I am using jquery timepicker plugin and its angular directive. When I reset the the scope values from javascript then for the same time scope value not updating. I have tried to make changes on timepicker directive file but not succeeded. Example:- Select start-time 1:00AM then end-time automatically sets to 1:15AM which is updated from watch function in JS file. Now click Reset and values would be deleted or input fields would be blank. Now again select the same time 1:00AM the end-time is not filled automatically and also Reset does not work. But that works If I change the time other than

Directives with Isolated scope versions conflict

阅读更多关于 Directives with Isolated scope versions conflict

问题 In my Angular app, i have a directive "editable". It written on Angular version 1.2.0-rc.2 and worked well, but when I upgraded framework to version 1.2.13 - directive broke. I checked capability with other versions, and was confused, because directive works only with three versions: 1.2.0rc1, 1.2.0-rc.2 and 1.2.0-rc.3 In new versions this directive works only with two ugly edits: 1. directive's property "terminal" set to "true" 2. compile element in "link" function Directive have simple

How to change the class on one div while hovering over another div with AngularJS?

阅读更多关于 How to change the class on one div while hovering over another div with AngularJS?

I want to change the class of one div while hovering over another div using AngularJS directives. Here is what I have so far http://jsfiddle.net/E8nM5/38/ HMTL <div ng-controller="Ctrl" ng-app> <div ng-class="my-class">This div will change class when one hovers over bottom DIV </div> <br/> <div class="hover-div" ng-mouseenter="my-class = 'highlight'" ng-mouseleave="my-class = 'lowlight'">HOVER OVER ME TO CHANGE THE UPPER DIV's CLASS</div> </div> CSS div.highlight { padding: 10px; background: red; color: white; } div.lowlight { padding: 10px; background: blue; color: white; } div.hover-div {

How to modify transcluded content before compile inside directive?

阅读更多关于 How to modify transcluded content before compile inside directive?

What I want to do, is to handle transclude by hand and modify the content before I insert into the DOM: return { restrict: 'E', transclude: true, template: '<HTML>', replace: true, link: function(scope, element, attrs, ngModelCtrl, $transclude) { var caption = element.find('.caption'); $transclude(function(clone) { console.log(clone); clone.filter('li').addClass('ng-hide'); // this don't work clone.addClass('ng-hide'); // same this one clone.attr('ng-hide', 'true'); // same this one $compile(clone)(scope.$new()).appendTo(caption); caption.find('li').addClass('ng-hide'); // and this }); } } In

How can i count the number of errors on Form?

阅读更多关于 How can i count the number of errors on Form?

FIDDLE How can i count the number of errors made on form ? HTML <div ng-show="form.$submitted && form.$invalid"> Sorry but 3 errors have been made. </div> One way you could do this by using the specific count of a specific error criteria, required , pattern etc.. that are available as a part of form's $error[prop] array. In your case you could try using form.$error.required.length :- <div ng-show="form.$submitted && form.$invalid"> Sorry but {{form.$error.required.length}} errors have been made. </div> Demo You could add a function on the controller which can determine the number of errors on

ng-cloak directive gets removed too early

阅读更多关于 ng-cloak directive gets removed too early

问题 I have an angular-js app with some controllers that shouldn't be shown initially. They flash on the screen despite my use of ng-cloak. The problem seems to be that compile gets called and removes the ng-cloak directives and class, this makes the controllers contents visible even though it shouldn't be because ng-show is false. If I pause js execution in ng-cloak's compile method I can see the elements appear as the ng-cloak directive is removed. If I pause js execution in the controller (for

Accessing angular directive (element)'s text inside the template

阅读更多关于 Accessing angular directive (element)'s text inside the template

So I am following this EggHead.io tutorial on custom components, and I came across this problem. When declaring a directive such as: angular.module('myApp', []) .directive('myDir', function(){ return { restrict: "E", controller: "myController", link: function(scope, element, attrs) { scope.foo = element.text(); }, templateUrl: "myDirTemplate.html" } }); and the Template being: <div>The value is: {{foo}}</div> and the directive being used such as follows: <html> ... <myDir>Bar</myDir> ... </html> element in the link function refers to the <div>The value is: {{foo}}</div> in the template. If I

element.replaceWith in a custom directive's link only work at first time called

阅读更多关于 element.replaceWith in a custom directive's link only work at first time called

I am new to Angularjs, and don't understand too much behind the scene. Basically I want to create an 'E' kink directive, base on the data in controller I dynamically create the html, like a whole 'table' thing, to replace the directive. The directve in my html file is like this: <matrixrows></matrixrows> My directive code is like this: angular.module('matrix', [.....]) .directive('matrixrows', [..., function (...) { return { restrict: 'E', replace: true, require: '^matrix', link: function (scope, element, attr, ctrl) { ......... scope.$watch('currentPage', function (newValue, oldValue) { if

how to make angular-xeditable edit state always enabled

阅读更多关于 how to make angular-xeditable edit state always enabled

I am using angular-xeditable to edit elements within a form. I would like to have all the elements in "editable" mode at all times, e.g. no "edit" button needs to be pushed before the user starts editing. I have been trying to use the $show() in my controller to enable the elements in the form, however it seems like the elements goes into viewing state again for example when using "onaftersave" when trying to save the values etc. How do I do in order to always be in edit mode where the user never needs to enable editing in order to start editing the values? bruce.donovan Possibly try adding