angularjs-directive | 易学教程

AngularJS : how to create DOM and bind to a model based on arbitrary hierarchical data

阅读更多关于 AngularJS : how to create DOM and bind to a model based on arbitrary hierarchical data

AngularJS : how to create DOM and bind to a model based on arbitrary hierarchical data

阅读更多关于 AngularJS : how to create DOM and bind to a model based on arbitrary hierarchical data

Angular issue with asynchronous call to function

阅读更多关于 Angular issue with asynchronous call to function

问题 I'm working with an Angular directive which loads JSON data from localStorage . This was easily done with localStorage.getItem(id) , but now I am trying to make it work via an API call (which in turn pulls from a database). I have the Angular factory code working, and the http requests working, but in the directive code there's a _handleAsyncLoad() function which is throwing me. In other words, I'm trying to use the built-in promise for the serialized object coming back from the API layer. ex

AngularJS : Replicate div on click of button

阅读更多关于 AngularJS : Replicate div on click of button

问题 I want to replicate the text fields(div) present in image every time the user click on '+' button. 回答1: If I understood your question properly , pls refer the below code . Template <div ng-app="myapp" ng-controller="myCtrl"> <div ng-repeat="item in items"> <input type="text" placeholder="name"> <input type="text" placeholder="email"> <button ng-click="add()">+</button> <p>Some text some text some text</p> </div> </div> controller var app = angular.module('myapp',[]); app.controller('myCtrl',[

Removing directive attribute does not remove listener

阅读更多关于 Removing directive attribute does not remove listener

问题 I have a button with a ng-click attribute. If I remove the ng-click attribute, the listener persists. How can I remove the event listener when I remove the ng-click attribute? angular.module('testApp', ['ng']) .directive('testDir', testDir) .controller('testCtrl', testCtrl); function testDir() { return { compile: (elem, attrs) => { // Remove ng-click attribute elem.removeAttr('ng-click'); } }; } function testCtrl($scope) { $scope.count = 0; $scope.handleClick = function() { $scope.count++; }

On click How can I cycle through JSON one by one in AngularJS

阅读更多关于 On click How can I cycle through JSON one by one in AngularJS

问题 Creating my first directive as an exercise in angular —making more or less a custom carousel to learn how directives work. I've set up a Factory with some JSON data: directiveApp.factory("Actors", function(){ var Actors = {}; Actors.detail = { "1": { "name": "Russel Brand", "profession": "Actor", "yoga": [ "Bikram", "Hatha", "Vinyasa" ] }, "2": { "name": "Aaron Bielefeldt", "profession": "Ambassador", "yoga": [ "Bikram", "Hatha", "Vinyasa" ] }, "3": { "name": "Adrienne Hengels", "profession":

AngularJS DOM Manipulation through Directives

阅读更多关于 AngularJS DOM Manipulation through Directives

问题 Currently I have a working angular app .... It works but im doing some DOM manipulation stuff in my controller rather than in a directive like i should. The problem is and my question becomes, HOW do i implement this type of functionality properly using directives?? A simple example is: <div id="container1"></div> <button type="button" ng-click="changeSize(1)">Small</button> <button type="button" ng-click="changeSize(2)">Medium</button> <button type="button" ng-click="changeSize(3)">Large<

Jasmine - How to test a stylesheet directive

阅读更多关于 Jasmine - How to test a stylesheet directive

问题 I have written a directive that interrogates the current URL, and loads the corresponding freestyle. The problem i am facing is how can i test the link function: HTML: <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>CSS Test</title> <link get-style-directive /> </head> Directive: app.directive('getStyleDirective', ["$compile", "$location", function($compile, $location) { return { replace: true, scope: true, link: function(scope, element, attrs) { var urlValue = $location

How to use a directive to dynamically change a template?

阅读更多关于 How to use a directive to dynamically change a template?

问题 I have this directive angular.module('starter.directive', []) .directive('answer', ['Helper', function (Helper) { return { require: "logic", link: function (scope, element, attrs, logicCtrl) { var htm = ''; if(logicCtrl.test == 'a') { htm = '<p>a</p>' } if(logicCtrl.test == 'b') { htm = '<p>b</p>' } }, template: '' // somehow use htm here } }]); I'm trying to use the htm for the template , Any ideas? 回答1: You can just put htm into scope of directive and use it inside template. angular.module(

How to use a directive to dynamically change a template?

阅读更多关于 How to use a directive to dynamically change a template?