angularjs-directive | 易学教程

AngularJS: Error: No controller: form

阅读更多关于 AngularJS: Error: No controller: form

HTML: <div ng-app="my-app" ng-controller="AppController"> <ng-form name="myform"> <gtux-el></gtux-el> </ng-form> </div> JS var app = angular.module('my-app', [], function () { }) app.controller('AppController', function ($scope) { }) app.directive('gtInputMsg', ['$compile', '$interpolate', '$log', function($compile, $interpolate, $log) { function link($scope, element, attrs, ctrls) { var modelCtrl = ctrls[0], formCtrl = ctrls[1], msgCtrl = ctrls[2]; element.on('click', function() { console.log('gt-input-msg:click', element) }); }; return { require : ['ngModel', '^form', 'gtInputMsg'], link :

Highcharts spans beyond bootstrap column width when implemented as an angular directive

阅读更多关于 Highcharts spans beyond bootstrap column width when implemented as an angular directive

问题 I have implemented an angular directive for highcharts as follows according to this highcharts blog post: angular.module('highCharts') .directive('ngChart', function () { return { restrict: 'E', template: '<div></div>', scope: { options: '=' }, link: function (scope, element) { var chart = new Highcharts.chart(element[0], scope.options); $(window).resize(function () { chart.reflow(); }); } } }) I am using this directive as follows inside following html <div class="container"> <div class="row"

Inconsistent Data on multiple page printing on a printer

阅读更多关于 Inconsistent Data on multiple page printing on a printer

Requirement To print three(depends on the server response size) pages of print on one button click event. Stored a barcode image an array, and loop through that array and bind the value to ctrl.barCodeImage. Then call the print service to print each bar code in different page. But it print always three same value that is the last value in the array. It is a three separate pages with different bar code data in it. This is the expected response print 1 print 2 print 3 Current response is inconsistent. It will come all pages same value , which is the last value in that array. Implementation

AngularJS: Cannot interpolate attribute from first directive to a second. (w/ plunker example)

阅读更多关于 AngularJS: Cannot interpolate attribute from first directive to a second. (w/ plunker example)

Reference Reference plunker: http://plnkr.co/edit/otv5mVVQ36iPi3Mp0FYw?p=preview Explanation of the issue Suppose that we have two directives, first-directive and second-directive . Now suppose we only have access to first-directive which we hope to wrap second-directive with and pass to it our own manipulated attributes. app.directive('firstDirective', function() { return { scope: true, priority: 1000, transclude: true, template: function(element,attributes){ console.log('template') return '<second-directive two="{{one}}"></second-directive>' }, compile: function(element,attributes) { console

“Uploader” must be an instance of FileUploader

阅读更多关于 “Uploader” must be an instance of FileUploader

I referred this: https://github.com/nervgh/angular-file-upload/tree/version-3.0.0-alpha angular.min.js:14540 TypeError: "Uploader" must be an instance of FileUploader at link (http://localhost:8080/services/angular-file-upload.js:1874:24) at invokeLinkFn (http://localhost:8080/lib/js/angular.min.js:10445:8) at nodeLinkFn (http://localhost:8080/lib/js/angular.min.js:9733:9) at compositeLinkFn (http://localhost:8080/lib/js/angular.min.js:8712:10) at compositeLinkFn (http://localhost:8080/lib/js/angular.min.js:8717:10) at compositeLinkFn (http://localhost:8080/lib/js/angular.min.js:8717:10) at

Control the setting of $viewValue in a directive's nested ngModel

阅读更多关于 Control the setting of $viewValue in a directive's nested ngModel

I have a fairly simple UI control that I've modeled as a directive, which is an editor for phone numbers that has two input fields: one for the country code and another for the number. The directive's usage looks like this: <phone-editor ng-model='phoneNo'></phone-editor> In the directive's declaration, I require ngModel and the template looks like this: <input type="text" ng-model="countryCode" /> <input type="text" ng-model="number" /> It's clear how to compose and decompose the original model into the two fields. What I cannot figure out is - how do I use a formatter for the second field

Improve AngularJS directive code

阅读更多关于 Improve AngularJS directive code

I wrote an AngularJS directive, but I'm pretty new about it, and I don't know if I done in the "Angular way"... Here is my plunker with the code: http://plnkr.co/edit/X1tOk4z8f6dCK3mfB7HP?p=preview html: <!DOCTYPE html> <html ng-app="app"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <meta charset=utf-8 /> <title>Directive Test</title> <script src="script.js"></script> </head> <body ng-controller="MainCtrl"> <button id="button1" ng-click="dummyClickFoo()" wait-button="foo"><i></i> Foo</button> <button id="button2" ng-click="dummyClickBar()

Google-like search box with an AngularJS directive

阅读更多关于 Google-like search box with an AngularJS directive

问题 I am writing an application which UI wise is almost exactly like Google. I arrive at landing page I have a search box which on submit directs you to results page. Here you have the same search box and other directives in which you can switch between modes: eg. web, image. Currently I have: on landing page: form with action="results.html" which passes the parameters in the url. <form name="search" role="form" action="results.html"> <div class="input-group input-group-search"> <input type="text

AngularJS : Directive transcluded scope lost

阅读更多关于 AngularJS : Directive transcluded scope lost

I’m building a directive, I’m calling ‘requires-authorization’ to wrap an ng-if directive. I’d like to use it as follows: <requires-authorization role='SuperUser'> <!— super secret user stuff goes here, within the scope of this view's controller —> </requires-authorization> I’ve gotten as far as: angular.module('myApp').directive('requiresAuthorization', function() { return { template: '<div ng-if=\'iAmInRole\' ng-transclude></div>', restrict: 'E', transclude: true, scope: { role: '@' }, controller: function($scope, UserService) { $scope.iAmInRole = (UsersService.myRoles.indexOf($scope.role) !

Why does two way binding sometimes work without using a dot in Angular?

阅读更多关于 Why does two way binding sometimes work without using a dot in Angular?

Consider this fiddle: Fiddle 1 When you select a date, you will notice that the text above it is not updating. This is because I had to use an object in my list, like this: Fiddle 2 (simplified). But, on the other hand, this does work, without a dot: Fiddle 3 Could someone explain what the difference is between fiddle 1 and fiddle 3? I've read about prototypical inheritance ( unerstanding scopes ), but I don't understand this behavior. Fiddle 3: HTML: <div ng-controller="MyCtrl"> Hello, {{name}}! <button ng-click="visible = !visible">Toggle</button> <div ng-show="visible"> Some content <sample