angularjs-directive | 易学教程

AngularJS - A simple infinite scroll

阅读更多关于 AngularJS - A simple infinite scroll

问题 I am trying to write a similar small infinite scroll to the one found here: http://jsfiddle.net/vojtajina/U7Bz9/ I've been able to display the first 5 pieces of data, however on scroll, the further items are not being displayed. HTML: <div id="fixed" directive-when-scrolled="loadMore()"> <ul> <li ng-repeat="i in items | limitTo: 5">{{ i.Title }}</li> </ul> </div> JS: var app = angular.module('app', []); app.controller('MainCtrl', function($scope) { $scope.name = 'World'; $scope.items = [ {

Angular scope is shared for all modules and controllers

阅读更多关于 Angular scope is shared for all modules and controllers

I have a single page application, which has a root module with about 5 seperate smaller modules. var rootModule = angular.module('root', ["firstModule", "secondModule", "thirdModule"]) Each module has directives and controllers. Today I discovered that I can access other module and controller scope from all other modules and controllers. So for example this controller: thirdModule.controller('ThirdController', ['$scope', function ($scope) { alert($scope.title); } And in this controller I alert the variable and it works. firstModule.controller('FirstController', ['$scope', function ($scope) {

AngularJS - open controller in a dialog (template loaded dynamically)

阅读更多关于 AngularJS - open controller in a dialog (template loaded dynamically)

I'm playing around with AngularJS. I'm using a controller and a templateUrl to have things done automagically :) Currently the layout has only <div ng-view></div> directive into which all the things are loaded. I'd like to open the modal (Bootstrap or jQuery UI, doesn't matter) and load there ( inside a modal's body ) the controller specified by given link. Just like every link "opens" (loads the template & does all the DOM compilation & linking) inside my main ng-view , I'd like some of the links to open inside the modal. I've checked out what AngularStrap and Angular-UI Bootstrap has to

Content briefly rendering then disappearing using ng-if

阅读更多关于 Content briefly rendering then disappearing using ng-if

问题 I have some content on my page which is wrapped in an ng-if like below: <div ng-if="ShowMessgae" class="text-danger"> <p> <strong> Message displayed to User </strong> </p> </div> Then in my angular js controller I have the following: function MyController($scope, $q, notifyHelper) { openAjaxLoaderGif(); $scope.ShowMessgae = false; MyService.getVarsFromSession().then(function (result) { // some code removed for brevity if(some coditional) { $scope.ShowMessgae = true; } }, function (data,

Angular js - On scroll up load more data

阅读更多关于 Angular js - On scroll up load more data

I have developed a chatting system like Facebook. Now I want to do load earlier messages. Can anyone help me to do the functionality like when I scroll up it should load earlier messages same like Facebook. You may want to take a look at ngInfiniteScroll . With this module, it is very easy to implement what you want. Here is an example: <div ng-app='myApp' ng-controller='DemoController'> <div infinite-scroll='loadMore()' infinite-scroll-distance='2'> <img ng-repeat='image in images' ng-src='http://placehold.it/225x250&text={{image}}'> </div> </div> var myApp = angular.module('myApp', [

Why does the link function of my directive never get called?

阅读更多关于 Why does the link function of my directive never get called?

问题 I have this directive: hpDsat.directive('ngElementReady', [function() { return { restrict: "A", link: function($scope, $element, $attributes) { // put watches here. console.log(" WHAT THE @#%*%$??? "); $scope.$eval($attributes.ngElementReady); } }; }]); I never see the output of the console.log . I'm declaring an element like this: <div data-ng-element-ready="console.log(' ------------------------------- COMPILED! ')" data-ng-if="analysis.type" data-ng-show="showBasicHtml" data-ng-include=

Validation for email or phone number for same text field in angularjs

阅读更多关于 Validation for email or phone number for same text field in angularjs

问题 I am working on registration form for my project in AngularJs. Users can register with his/her Email/Phone. I need to validate that particular text-box. I have validations for both, with different text fields, with ng-pattern. But how can I validate for both in one text field? I have updated my code, here:- enter code here http://plnkr.co/edit/mCVxHxl2DIvqOYtVapRN?p=preview 回答1: Use /^([_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,5}))|(\d+$)$/ Demo 回答2: You can use a pipe '|'

how to set the fieldname using a template in angularjs

阅读更多关于 how to set the fieldname using a template in angularjs

I want to have some interaction of the label for a field with the field validation properties. I created a plunker of a working example. http://plnkr.co/edit/oNq5lmjtjRDaEkzKsrR2?p=preview But in this example the fieldname is hardcoded. I tryed to set the fieldname via scope variable into the template. This is not working: http://plnkr.co/edit/yEl04xyFR5RWYCmI2bMH?p=preview HTML: <form name="myForm" ng-controller="ctrl"> <fieldset field-name="{{model.fieldName}}" label-text="{{model.label}}" ng-model="model.value"> <fieldset> </form> JavaScript: var app = angular.module('myApp',[]); app

AngularJS : how to reflect a variable change in one directive into another directive while using ng-repeat

阅读更多关于 AngularJS : how to reflect a variable change in one directive into another directive while using ng-repeat

In first case : I implemented a directive directive2 that will change bar value which will also get reflected in directive1 . Here u can find the plunkr (1st case) In second case :I implemented a directive directive2 , with ng-repeat used along with this directive that changes bar value and this is supposed to get reflected in directive1 . Here u can find the plunkr for directive2 with ng-repeat (2nd case) How i expect it to work : i want the bar in directive1 to change according to the change in directive2 My question: 1st case is working the way i want. In the 2nd case my bar value in

History back navigation using ng-include

阅读更多关于 History back navigation using ng-include

问题 I started to develop a single page web app with angularjs and now I'm defining the navigation. So, I end up using 2 levels of navigation: 1st level: Main navigation using ng-view. 2nd level: SubView navigation with the top and bottom bars using ng-include. This is our iphone scenario: The iphone scenario seems ok for me because we control all navigation with our buttons. But, now lets think in android scenario where the user can use the history back button(physical button) to navigate back.