angularjs-directive | 易学教程

Angularjs - $rootScope in directive link function

阅读更多关于 Angularjs - $rootScope in directive link function

问题 I am asking this question because I am not quite clear on how to think of rootscope as a dependency passed to directives I have a directive that needs to display some information from $rootScope ... I thought I needed to pass the $rootScope to a directive but when I write a directive like this it seems to work. .directive("myBar", function () { return { restrict: "E", transclude: true, replace: true, template: '<div>' + '<span ng-transclude></span>' + '{{rsLabels.welcome}} {{rsUser.firstName}

AngularJS accessing DOM elements inside directive template

阅读更多关于 AngularJS accessing DOM elements inside directive template

问题 Is there a more "angular" way of selecting DOM elements inside a directive template? For example, say you have this directive: app.directive("myDirective", function() { return { template: '<div><ul><li ng-repeat="item in items"></ul></div>', link: function(scope, element, attrs) { var list = element.find("ul"); } } }); I used the jQuery style selector to get a hold of the DOM <ul> element rendered in my template. Is there a better way to do this? 回答1: You could write a directive for this,

setViewValue in directive on input not updating actual visible input value

阅读更多关于 setViewValue in directive on input not updating actual visible input value

I've been fighting with this for almost two days. I hope you guys can help me. Summary: I have problems setting the view value of some input fields programatically. I have a form with inputs whose values are saved before the form is removed (multiple elements and multiple forms possible, user might close a form, and reopen later). On reopening the form I want to restore the previous view values (main reason is to get back also the invalid view values which were not saved in the model). This doesn't work. If I call ctrl.$setViewValue(previousValue) I get the model (visibly) updated (if valid),

Isolated scope with simple angularjs nested directive

阅读更多关于 Isolated scope with simple angularjs nested directive

问题 Please check this plnkr I have read everyhting can find about directives, scope and isolated scopes. But I still cannot understand the way to make this work. The directive I created works perfectly as long as it is not nested within another directive. When nested, the 'localFunc: "&func"' attributes bind to outer controller scope just fine but 'localAttr: "=attr"' scope fail. I would be ever so grateful is anyone can help me understand why. 回答1: Pictorially, here is what your scopes look like

AngularJS : How to pass data from directive to controllers function

阅读更多关于 AngularJS : How to pass data from directive to controllers function

I'm trying to pass some data from directive into a function addTrackFromPicker in my controller. $scope.addTrackFromPicker = function (message) { console.log("addTrackFromPicker", message); }; Here what I have in my directive dir.directive('youtubeList', function($http, $timeout, YT_event){ return { restrict: 'E', scope: { search: '=', dial: '&' }, templateUrl: 'youtube-list.html', ... Here I want to call controllers function from my template and pass it item.id.$t as argument: <div class="media list-group-item" ng-repeat="item in entries"> <a type="button" ng-click="dial(item.id.$t)"> <img ng

How to implement jQuery range slider in AngularJS

阅读更多关于 How to implement jQuery range slider in AngularJS

I am trying to use anuglar-slider in my existing AngularJS app. I followed the author's comments here I downloaded below files (in Head tag) from author's github and added in my index.html HTML code : <head> <link rel="stylesheet" href="css/angular-slider.css"> <script src="js/vendor/angular-slider.js"></script> </head> <body> <slider floor="10" ceiling="60" ng-model-low="lowValue" ng-model-high="highValue"></slider> </body> App.js (Angular code) . I added second line as per Author's instructions, I suspect I did do something wrong there var app = angular.module('myApp', []) angular.module(

AngularJS - Format Text Return From JSON To Title Case

阅读更多关于 AngularJS - Format Text Return From JSON To Title Case

I have a service that retrieves data from a JSON file. Some of the data within the data is all in uppercase, for example: $scope.FootballClubs = [{ CompanyName: [MANCHESTER UNITED, LIVERPOOL FOOTBALL CLUB, CHELSEA, WIGAN UNTIED, LEICESTER CITY] }]; And in my HTML, i am simply throwing about the above: <div ng-repeat="name in FootballClubs"> {{ name.CompanyName }} </div> Which throws out: MANCHESTER UNITED LIVERPOOL FOOTBALL CLUB CHELSEA WIGAN UNTIED LEICESTER CITY What i am trying to display is: Manchester United Liverpool Football Club Chelsea Wigan United Leicester City dubadub A filter is

Why is the post link function executed before the transcluded child link functions?

阅读更多关于 Why is the post link function executed before the transcluded child link functions?

The timing of (pre/post)link functions in AngularJS are well defined in the documentation Pre-linking function Executed before the child elements are linked. Not safe to do DOM transformation since the compiler linking function will fail to locate the correct elements for linking. Post-linking function Executed after the child elements are linked . It is safe to do DOM transformation in the post-linking function. and this blog post clearly illustrates this expected order. But this order does not seem to apply when using ng-transclude and nested directives. Here is an example for a dropright

how to display sorted data from complete object in angular js?

阅读更多关于 how to display sorted data from complete object in angular js?

问题 I am trying to make demo of sorted data and display on table.Actually In my demo I am hitting a service got some data (2000) objects in that as a response.So I am display 50 objects at one time and using infinite scroll I load more data which is working fine .I am able to load more data when I scroll to bottom .There is buutton on my header "^" or "V" .Please check on header (left icon "V") Example "Account Name "V"" Using this I icon I need to sort my column . Actually The issue is current

Calling directive's methods from parent controller in AngularJS

阅读更多关于 Calling directive's methods from parent controller in AngularJS

I am using AngularJS with the alias controllers pattern. I can't access (or I don't know how to) directive methods from a parent controller. I have a function inside my controller that should call a directive method but this directive method is not available inside the this controller value. This is what I have. What I am doing wrong? JS angular.module('myApp', []). controller('MyCtrl', function(){ this.text = 'Controller text'; this.dirText = 'Directive text'; this.click = function(){ this.changeText(); } }) .directive('myDir', function(){ return { restrict: 'E', scope: { text: '=' }, link: