angularjs-directive | 易学教程

How to call function in ng-click which is defined in factory service

阅读更多关于 How to call function in ng-click which is defined in factory service

问题 How can I call the function in ng-click which is defined inside a factory service, app.factory('MyFactory', [function () { return { setTest: function(test) { alert(test); } }; }]); app.controller('TestCtrl', ['$scope','MyFactory', function ($scope, MyFactory) { }]); <li><a href="#" ng-click="setTest('PHP')">PHP</a></li> <li><a href="#" ng-click="setTest('Javascript')">Javascript</a></li> 回答1: The method should be defined on your scope for it to be usable in bindings. In your controller you

AngularJS : Directive Isolated Scope Undefined

阅读更多关于 AngularJS : Directive Isolated Scope Undefined

问题 I am writing a directive with an isolate scope with a two-way binding in AngularJS . However, I cannot seem to get the two-way binding to work. No matter what I do, the populate property on the isolate scope is always undefined (although the property does exist) instead of being the value it's supposed to be bound to. HTML: <html> <body ng-app="MyApp"> <div ng-controller="MyController"> {{data.dataProp}}  <scope-fail data-source="data

DOM is not ready in a directive's link function. Is hacky Timeout the only solution?

阅读更多关于 DOM is not ready in a directive's link function. Is hacky Timeout the only solution?

问题 I'm using an ng-repeat inside a directive's template. myApp.directive("test", function () { return { restrict: 'C', scope: { bindVar: '=' }, template: '<div>\ <div class="item" ng-repeat="sel in bindVar">{{sel.display}}</div>\ </div>', link: function ($scope, element, attrs) { // setTimeout(function() { alert($('.item').length); // <--- RETURNS 0, IF I ADD TIMEOUT RETURNS 3 // },0); } // of link } // of return }); http://jsfiddle.net/foreyez/t4590zbr/ However, when the link() function is

form element ng-model change not observered in isolate scope directive watch

阅读更多关于 form element ng-model change not observered in isolate scope directive watch

问题 Before posting this fiddle, i checked SO for similar question. Got few answer but all those were not form elements. http://jsfiddle.net/dgQAd/ I have the following questions: 1) The textbox is bound to a model uname , but onload the textbox is not displaying the value. why this is happening? 2)while searching for answers for this, i saw something like require:ngModel , and injecting a controller inside the linking function, how can i use this injected controller inside the linking function of

One-way binding in Angular directives

阅读更多关于 One-way binding in Angular directives

问题 The official Angular documentation for compile discusses the one-way binding type < . In the Angular community , I see @ commonly referred to as the "one-way binding type". What gives? The @ doesn't seem to me to be true one-way binding since it's just evaluating the expression and setting a string. The < seems to be more similar to = with the exception that the binding is only one-way. My guess is that < was introduced recently which would explain why @ used to be referred to as the one-way

$rootScope.$broadcast not working

阅读更多关于 $rootScope.$broadcast not working

问题 I am trying to get $rootScope.$broadcast to refresh my view. The service is- var app = angular.module("productsApp", []) .service("serviceProvider", function ($http) { this.getDatas = function getDatas(data) { return $http({ method: 'POST', url: serviceUrl + '/GetProductsByCategoryOrName', headers: { 'Authorization': apiKey }, data: data }) } return this }).factory("sharedService", function ($rootScope) { var mySharedService = {}; mySharedService.values = []; mySharedService.passData =

Directive rendered via UI-Grid cellTemplate rendering incorrectly

阅读更多关于 Directive rendered via UI-Grid cellTemplate rendering incorrectly

问题 I am experiencing a strange issue in that my directive seems to be executing on stale row.entities, meaning it does not get the new values as you scroll down or modify the sort of the grid. The initial ~20 rows render fine but past that the directives become disassociated with the rows. See my very hacked together example here. 回答1: It looks like during sort values of the expression you pass to directive change, but the expression itself stays the same. You should change scope & expression

Angular directive with ng-attr bound to model

阅读更多关于 Angular directive with ng-attr bound to model

问题 All code and preview in plunker I want to double-bind an attribute to directive scope and changing that attribute from outside it changes something inside the directive. <body ng-app="paneApp" ng-controller="AppCtrl"> <div class="btn-group"> <button type="button" class="btn btn-primary" ng-model="pane.a" btn-checkbox>A</button> <button type="button" class="btn btn-primary" ng-model="pane.b" btn-checkbox>B</button> <button type="button" class="btn btn-primary" ng-model="pane.c" btn-checkbox>C<

Why is my Directive throwing “Error: $injector:unpr Unknown Provider”

阅读更多关于 Why is my Directive throwing “Error: $injector:unpr Unknown Provider”

问题 I've working on refactoring my Controllers, Factories and Directives to the recommended Angular-Style-Guide for Angular Snippets. I've gotten the Controllers and Factories working correctly with the new style, but not the Directives. Unknown provider: $scopeProvider <- $scope <- platformHeaderDirective The new Directive style with errors: (function() { "use strict"; angular .module('platformHeaderDirectives', []) .directive('platformHeader', directive); directive.$inject = ['$scope']; /*

why ng-repeat changes order of link function execution

阅读更多关于 why ng-repeat changes order of link function execution

问题 The usual order of execution of compile and link function on nested directives is as below Markup <dir1> <div dir2=""> </div> </dir1> Order of execution 1) compile of directive 1 2) compile of directive 2 3) link of directive 2 4) link of directive 1 Assuming dir1 has restrict property set to 'E' and dir2 has restrict set to 'A' Now if you use a ng-repeat directive in the same markup, the order of execution changes Markup <dir1> <div ng-repeat="item in items"> <div dir2=""> </div> </div> <