angularjs-directive

问题 I have a link tag in HTML: <link url="http://google.com">google</link> and code that transform it to <a> tag: app.directive('link', function() { return { restrict: 'E', transclude: true, replace: true, scope: { url: '@' }, template: '<a href="{{url}}" ng-transclude></a>' } }); But using this text Google is outside and URL is not removed (it copy if from link to a tag). If I use an attribute it works fine <div link url="http://google.com">google</div> What's wrong? Here is jsFiddle. 回答1: I

问题 In angularjs , I am making a treeview using directive. return { restrict: "E", //replace: true, scope: {member: '=', ShowDetailsCtrlFunc : '&'}, template: "<li><span ng-click=ShowDetailsCtrlFunc()>{{member.NodeName}}</span></li>", controller: 'MainCtrl', link: linkerfunc } Things are fine, but i observed that controller function calls multiple times while loading. Would be a great learning if explain me the concept behind this. Or is it possible to handle this and let the function execute

问题 According to AngularJS doc a/the directive controller is: instantiated before the pre-linking phase and it is shared with other directives if they request it by name (see require attribute). This allows the directives to communicate with each other and augment each other's behavior. This sounds great and useful in a case where UI view is composed of container and widget, widget's link func can be passed in the container directive controller via declarative approach require:^cotnainerDirective

问题 I'm a newbie at Angular, so don't be surprise if the answer to this question is pretty basic. I'm trying to encapsulate a map in a directive, the map will have some custom behavior: I want it to communicate with a Service to retrieve all the points related to a merchant . So I want to pass the merchant as a parameter to the directive: This is the HTML: <div ng-app="myApp"> <div ng-controller="Ctrl1"> <p>Ctrl 1: {{merchant1}}</p> <map merchantDetails="{{merchant1}}"></map> </div> </div> This

问题 I got directive for address autocomplete and get places info. Also I have added a code for getting city id and the code worked in one of my past project, but not working now ( The data[0].place_id in the code have a correct value but scope.form.object.localityId is empty outside the function. PS scope.form.object... is declared in a parent controller of the directive and other variables are filling correct .directive('shAddressPredict', function(){ return { require: 'ngModel', link: function

问题 I have different pages on may application which have their own controllers. One of them has an $interval function, let's say a timer. Click on a button will start this interval function, which updates itself every second. What i want to have is, i want to be able to go to any other page in my application (calling different controllers), but i want my interval to continue running until i stop it explicitly from the first controller. A rootScope interval so to speak. How can i do it? EDIT:

问题 I'm trying to create a directive where in data is displayed in a table layout. Each row has a edit button and on clicking the edit button only that row should be in edit mode. But in my case all the rows get displayed in edit mode. Here is demo. Here is the directive code : .directive('myGrid', function() { return { restrict: 'E', scope: { employees: '=' }, controller: function($scope) { $scope.isEdit = false; $scope.showEdit = function() { $scope.isEdit = $scope.isEdit == true ? false : true

问题 I'm playing with transitions and directives. I've created a Card directive that should show a clone of it self in fullscreen when clicked. The transition doesn't happen if I don't apply the altering css class in a timeout. Is that how it should be done? <div ng-app='trans'> <div data-card class='card'>timeout</div> <div data-card='notimeout' class='card'>not timeout</div> </div> Between to original position and the fullscreen mode it should transition with a spin. The goto class is just so

问题 While trying to access $modelValue and $viewValue from inside custom directives, I am getting null . var demo = angular.module('demo', []); demo.directive('dogInfo', function($parse) { return { restrict: 'E', require: 'ngModel', template: "<div> Dog's name: {{dogname}}<br>View Name: {{viewValue}}<br>Model Value: {{modelValue}}<br> Tag name: {{tagName}}</div>", link: function (scope, element, attrs, controller) { scope.viewValue = controller.$viewValue; scope.modelValue = controller.

问题 My goal is to do some action when a particular directive receives the class 'focused' through ng-class. But watching for changes on each of the directives seems to be doing weird things I don't understand. Here is the code first: http://plnkr.co/edit/6Te8O2mlBI058DpwGF7f?p=preview index.html <test-question ng-class="{'focused': tracer.focus == 1}" focusnum = "{{n}}" ng-click="tracer.focus = 1" > Test Question 1 </test-question> <test-question ng-class="{'focused': tracer.focus == 2}" focusnum