angularjs-directive | 易学教程

Angularjs - add ng-* attributes using directives

阅读更多关于 Angularjs - add ng-* attributes using directives

问题 I'm trying to add simple ng-mouseover bindings to elements managed by directives. But colud not get it working. @ http://jsbin.com/aqibij/2/edit I've tried to recompile the element after adding ng-mouseover binding. directive.compile and outer controller runs, but directive.linker does not run. @ http://jsbin.com/ikebed/1/edit I've moved the $compile'ing into linker. It runs fine, ng-mouseover runs fine, but recompiling in linker causes endless loop, which crashes the browser at the end :)

how to redirect one html page to another using button click event in angularjs

阅读更多关于 how to redirect one html page to another using button click event in angularjs

问题 i am using angularjs directive to redirect another html page.i am writing click function inside directive but i am getting page name in alert box not redirect to another html page. sample.html: <test1> <button data-ng-click="click('/page.html')">Click</button> </test1> sample.js: app.directive('test1',['$location', function(location) { function compile(scope, element, attributes,$location) { return{ post:function(scope, element, iAttrs,$location) { scope.click=function(path) { alert("click"

How to recompile a directive upon inserting into DOM (angularjs)

阅读更多关于 How to recompile a directive upon inserting into DOM (angularjs)

问题 Okay, so I've created a directive let's say <calendar></calendar> It gets rendered as I expected so everything works fine. Now, my question is how to (re)render it when inserted into DOM? I don't want to use it on my page all the time, I just want to dynamically add it and render just when I need it to (it's a part of a module), let's say, ideally I want it to appear like $("body").append("<calendar></calendar>") How can I achieve this with angularjs? 回答1: You need to write below two lines

angularJS element.on callback and scope.$apply

阅读更多关于 angularJS element.on callback and scope.$apply

问题 In this example, I have an input with an attached directive. The directive is meant to display messages next to the input. There's another input and a button to add messages. Once some messages are displayed, focusing on the input with the attached directive should clear the messages. http://jsfiddle.net/viro/WBqxf/ So I have a directive with an isolated model, and I'm trying to update the model when the element which has the directive goes into focus. It seems like I have to wrap event

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? 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 in a shared data access object returned by a separate factory in Angular, rather than directly in a scope. I

Set default value inside ngSelect

阅读更多关于 Set default value inside ngSelect

问题 I have a a ngSelect with some options in it. <select data-ng-model="type" data-ng-change="option(type)"> <option data-ng-repeat="type in languages" value="{{type.i18n}}"> {{type.language}} </option> </select> And a Controller angular.module('navigation', []) .controller('NavCtrl',['$scope','$translate', function($scope,$translate){ $scope.option = function(type){ console.log(type) //this display the i18n value of languages $translate.use(type); } $scope.languages = [ { language: "English",

Angular Bootstrap Slider - on stop execute function

阅读更多关于 Angular Bootstrap Slider - on stop execute function

I have the following code for creating a slider: <html ng-app="angular-bootstrap-slider-test"> <head> <title>Angular Bootstrap Slider test</title> <script data-require="angular.js@1.3.0" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script> <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="bootstrap.css" rel="stylesheet" /> <link href="bootstrap-slider.css" rel="stylesheet" /> </head> <body ng-controller="TestCtrl"> <div class="col-md-2 col-md-offset-2"> <slider on-stop-slide=

Dynamically adding Angular directives

阅读更多关于 Dynamically adding Angular directives

问题 I'm fairly new to angular JS and am finding it a steep learning curve, I get the feeling im really missing the point here but here goes: I want to add a directive to my page from a controller. So I thought if I add the directive tag to the page, the directive and associated controller/template etc get added with it. After reading about the $compile method, I thought this would then be used to bind this directive to its newly created tag. This part is commented out below, but with or without

How should I access an element's angularjs $ngModelController in a jasmine unit test?

阅读更多关于 How should I access an element's angularjs $ngModelController in a jasmine unit test?

问题 I'm currently using directiveElement.data("$ngModelController") to get access to the element's $ngModelController , as in the following example. describe("directiveElement", function () { it("should do something with ngModelController", inject(function($compile, $rootScope) { var directiveElement = $compile("<input ng-model="myNgModel" customDirective type="text"></input>")($rootScope); $rootScope.$digest(); var ngModelCtrl = directiveElement.data("$ngModelController"); ngModelCtrl.

Illegal use of ngTransclude directive in the template! when doing transclusion manually

阅读更多关于 Illegal use of ngTransclude directive in the template! when doing transclusion manually

I preciously asked on SO if it was possible to transclude the inner contents of a directive twice in the directive template (clone it and insert it in two places in the template). A very helpful person helped me put this plunkr together. http://plnkr.co/edit/k2UB1o4CTHtZ1voS0OKN?p=preview It seems to work at first. The problem comes when I use any child element which uses transclusion itself. The error I get is... [ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element: For example I have a button directive