angularjs-directive | 易学教程

ng-app V/S data-ng-app in AngularJS

阅读更多关于 ng-app V/S data-ng-app in AngularJS

问题 In AngularJS when using ng-app : ng-app found in the document will be used to define the root element to auto-bootstrap as an application. In some of the application it is being used as data-ng-app . Is there any difference in both of the following declaration, If Yes what & If No then which one is significant and why ? 1. <body ng-app> <p>{{ 1 + 2 }}</p> </body> 2. <body data-ng-app> <p>{{ 1 + 2 }}</p> </body> 回答1: Both and are the same except for the fact that if you want your template/code

How to implement gmail compose window concept in Single Page Applications?

阅读更多关于 How to implement gmail compose window concept in Single Page Applications?

问题 I am working on a project where it would be easier for users to quickly add transactions. I am very much interested to do something similar to what gmail compose pop up does on the single page I have no idea how to implement such a thing. Please give me directions about how to do such things I am interested in building it using AngularJS P.S Sorry for a broad question, but I really don't know what this is called and don't know what to Google for either 回答1: You can construct a popup like that

AngularJS Wrapping a ui-select in a custom directive

阅读更多关于 AngularJS Wrapping a ui-select in a custom directive

问题 I'm trying to wrap a ui-select in a custom directive. (https://github.com/angular-ui/ui-select) this.adminv2.directive('eventSelect', function() { return { restrict: 'E', replace: true, scope: { ngModel: '=', placeholder: '=' }, controller: function($scope, $http) { return $scope.refreshEvents = function(searchTerm) { return $http.get('/events/autocomplete', { params: { term: searchTerm } }).then(function(response) { return $scope.events = response.data; }); }; }, template: "<div>{{ngModel}}

Listen for form submit event in directive

阅读更多关于 Listen for form submit event in directive

问题 I want to listen for form submitting in a directive. Say I have a directive like this: app.directive('myDirective', function () { return { restrict: 'A', require: '^form', scope: { smth: '=' }, link: function (scope, el, attrs, formCtrl) { scope.$watch(function(){ return formCtrl.$submitted; },function(currentValue){ console.log('submitted'); }); } } }); With the above method I can watch for first submit, but not the rest. I tried to do something like this: scope.$watch(function () { return

Bind events on AngularJS element directives using jQuery

阅读更多关于 Bind events on AngularJS element directives using jQuery

问题 I have a directive in AngularJS: module = angular.module("demoApp", [], null); module.directive('sample', function () { return { restrict: "E", transclude: true, replace: true, template: "<div ng-transclude></div>", controller: function ($scope, $element) { this.act = function (something) { //problematic line HERE $element.trigger("myEvent.sample", [something]); }; } }; }) .directive('item', function () { return { restrict: "E", require: "^sample", transclude: true, replace: true, template: "

AngularJS directive is not working

阅读更多关于 AngularJS directive is not working

问题 Please find below the directive which i wrote, angular.module('netVogue.directives', []). directive('set-First-Active', function() { return function(scope, element, attrs){ alert('sample'); element.addClass("active"); }; }); I have added this directive to my module in below way, angular.module('netVogue', ['netVogue.filters', 'netVogue.services', 'netVogue.directives']); I used this directive in my template in following format, <div class="item" ng-repeat="viewPrintcampaign in

AngularJS ng-click not invoked with {{$index}} used

阅读更多关于 AngularJS ng-click not invoked with {{$index}} used

问题 For some reason AngularJS does not fire off the event when {{$index}} is used in ng-click. My html: <div ng-controller="Ctrl"> <ul> <li ng-repeat="foo in foos"> <label>{{foo.name}}</label> <a href="#" ng-click="remove({{$index}})">X (doesnt work)</a> <a href="#" ng-click="remove(0)">Remove first element (works)</a> </li> </ul> </div> jsfiddle: http://jsfiddle.net/Lcasg/3/ Anyone knows how to fix this? Thanks 回答1: The value of the ng-click attribute is evaluated as an angular expression, so

Angular $compile with required controller

阅读更多关于 Angular $compile with required controller

问题 I have a composite list directive - that is - a list item that can be a list himself. The parent directive defines the controller: .directive('parent', function() { controller: function($scope) { }, link: function (scope, element, attrs) { } }) The list (of items) requires the parent controller which by itself works fine (why shouldn't it..): .directive('list', function() { require: '^parent', link: function (scope, element, attrs, parentCtrl) { } }) The same goes as well for the concrete

Directive (nested inside a partial) throws “Termplate must have exactly one root element”

阅读更多关于 Directive (nested inside a partial) throws “Termplate must have exactly one root element”

问题 I'm trying to follow angular best practice recommendation and use directives to encapsulate reusuable HTML elements. The error message: Error: Template must have exactly one root element. was: partials/user/path/to/somedata.html the directive code: .directive('stDirectivename', function() { return { restrict: 'E', replace: true, // transclude: false, template: 'partials/user/path/to/somedata.html' }; }) And the template: <div ng-show="person.condition" class="someclass"> <span class =

angular restriction to not allow spaces in text field

阅读更多关于 angular restriction to not allow spaces in text field

问题 I do not want a user to enter spaces in a text field. I don't want it on submit validation but rather - a space will not show up on the text field when they click it. 回答1: <input ng-model="field" ng-trim="false" ng-change="field = field.split(' ').join('')" type="text"> Update: To improve code quality you can create custom directive instead. But don't forget that your directive should prevent input not only from keyboard, but also from pasting. <input type="text" ng-trim="false" ng-model=