angularjs-directive | 易学教程

Angular directive link function not called during pagination

阅读更多关于 Angular directive link function not called during pagination

问题 i am using Angular directive which has a link function. The dom page has the pagination and this directive is present in the second page and because of which the link function is not getting executed when i navigate to second page. Can you let me know how to resolve this issue ? angular.module("module") .directive("directive", function (){ return { restrict: "C", templateUrl: templateUrl, replace: true, link: function (scope, element, attrs) { //function to be executed }, controller:

AngularJS directive and pulling data from a service

阅读更多关于 AngularJS directive and pulling data from a service

问题 I am trying to figure out the correct way to pull data into my directive from a service. For some reason my $watch statement isn't triggered when the data is loaded. link: function(scope, element, attrs){ scope.loadtext = testService.getJSON(); scope.$watch(scope.loadtext, function(newValue, oldValue){ if (newValue !== oldValue){ alert("watch working"); element.addClass("red"); element.html(newValue.ok); } }); } Simple JSFiddle http://jsfiddle.net/jamesamuir/m85Ka/1/ However, I am not sure if

AngularJS directive and pulling data from a service

阅读更多关于 AngularJS directive and pulling data from a service

AngularJS: How to implement a directive that outputs its markup?

阅读更多关于 AngularJS: How to implement a directive that outputs its markup?

问题 DEMO Imagine I have some markup, e.g.: <my-input model="data.firstName"></my-input> Now, I would like to create a my-markup directive that will add a button to show/hide its markup. So, this: <div my-markup> <my-input model="data.firstName"></my-input> </div> should result in this: and when the button is clicked, the markup should appear: The my-markup directive should not break any data bindings of its children. Here is my attempt to implement this. The markup appears, but the button doesn't

why can not the controller of the required directive be found in angularjs?

阅读更多关于 why can not the controller of the required directive be found in angularjs?

问题 I wrote two directives in angularjs, one is embedded in the other one. below is the scripts for the directives: module.directive('foo', [ '$log', function($log) { return { restrict: 'E', replace: true, transclude: true, template: '<div id="test" ng-transclude></div>', controller: function($scope) { this.scope = $scope; return $scope.panes = []; }, link: function(scope, element, attrs) { return $log.log('test1', scope.panes); } }; } ]); module.directive('bar', [ '$log', function($log) { return

Angularjs >1.3 $validator causes modelValue to go undefined

阅读更多关于 Angularjs >1.3 $validator causes modelValue to go undefined

问题 I am using $validator to write a custom form validation directive. Currently it looks like this : module.directive('tweetLength', function(URLDetector) { return { restrict: 'A', require: 'ngModel', link: function(scope, element, attrs, ctrl) { var allowedCharacters; allowedCharacters = parseInt(attrs.tweetLength); ctrl.$validators.tweetLength = function(modelValue, viewValue) { var result; return result = URLDetector.urlAdjustedCharacterCount(modelValue) <= allowedCharacters; }; } }; }); It

create a decimal star rating for a comment in angularjs

阅读更多关于 create a decimal star rating for a comment in angularjs

问题 Here is a code which present star rating code in angularjs. In some point I need to have a average of all the rating in whole the system so instead of rate:2 , i will have 2.4 . In such case i am interesting to present 2 star which are complete fill and one which has only half filled. How can I change my code in order to add this functionality? Moreover, initially I would like to don't specify any star filled. That's also need a modification which I am not sure how should be done? <div ng-app

Why ng-class is called several times in directive of angular? [duplicate]

阅读更多关于 Why ng-class is called several times in directive of angular? [duplicate]

问题 This question already has answers here : How does data binding work in AngularJS? (14 answers) Closed 6 years ago . I don't know why it is called several times. <!doctype html> <html ng-app="HelloApp"> <body> <test-directive></test-directive> </body> </html> angular.module('HelloApp', []) .directive('testDirective', function () { return { restrict: 'E', replacement: true, template: '<div ng-class="test()">Test Directive</div>', link : function (scope, element, attrs) { console.log('link');

Creating single custom directive for ng-click to perform multiple controller function

阅读更多关于 Creating single custom directive for ng-click to perform multiple controller function

问题 I have the following code: <div>... <div class="glyphicon glyphicon-filter ng-click="vm.add()" tabindex="1"> <a href='' tabindex="2"><img id="touch" ng-click="vm.multiply(xyz)" src="/ui/assets/images/xxx.png"/></a> <div class="glyphicon glyphicon-filter"ng-click="vm.showId()" tabindex="1" title="Filter"> </div> ..</div> I want to create a custom single ng-click directive as its recommended for div ( ng-click to be used for only buttons). I want to know if there is any way I can create a

AngularJS: Sharing scope between multiple instances of same directive

阅读更多关于 AngularJS: Sharing scope between multiple instances of same directive

问题 I'm writing an app that uses the same table with the same data in multiple places. I created a custom directive that allows me to reuse this table. Unfortunately, if I edit the table in one instance, the other instance does not refresh. How do I link these two so that any edits I make to one show up in the other? 回答1: It sounds like you've mostly figured it out, the hard part is getting your data into a shape where the videos and photos can be shared by the slide show. I recommend doing this