angularjs-directive | 易学教程

Angular Dialog directives with Bootstrap 3

阅读更多关于 Angular Dialog directives with Bootstrap 3

We're trying to migrate from Bootstrap 2.3.2 to Bootstrap 3 (RC1) and are having problems with the AngularJS Dialog directive . On clicking the relevant button no dialogue popup appears (the page appears black. Clicking anywhere returns to the original non-black view). We're essentially using exactly the same code as in the above link. There is a known issue discussed here . In that discussion Luther suggests: "to have modal worked, add hide class to set display:none to modal and reset the modal's display to block" That unfortunately doesn't seem to make any difference. What alternatives could

How to dynamically disable ui-sortable directive in angular-ui

阅读更多关于 How to dynamically disable ui-sortable directive in angular-ui

I am using angular-ui for sortable using ui-sortable directive. Is it possible to dynamically enable/disable sortable functionality based on the scope state? So I need to have a button which changes the state of the scope property and depending on this property sortable either should work or not. The angular directive supports watching when the sortable options change: scope.$watch(attrs.uiSortable, function(newVal, oldVal){ So all you had to do was look at the jqueryui sortable documentation, and update the correct property on the plugin. Html <ul ui-sortable="sortableOptions" ng-model="items

ng-include, ng-template or directive: which one is better for performance

阅读更多关于 ng-include, ng-template or directive: which one is better for performance

I would like to know the best way to design an angular app regarding performance, for building an HTML template with reusable widgets like header, sidebar, footer, etc. Basically the main content is the central DIV which will have its content varying between routes, header and footer will be almost always the same, sidebar can vary in certain pages. --- index.html <body ng-cloak> <div data-ng-include data-src="'partials/template/header.html'"></div> <div data-ng-include data-src="'partials/template/sidebar.html'"></div> <div ng-view></div> <div data-ng-include data-src="'partials/template

AngularJS: how to bind a constant object to a directive

阅读更多关于 AngularJS: how to bind a constant object to a directive

I've created a directive with a binding using "scope". In some cases, I want to bind a constant object. For instance, with HTML: <div ng-controller="Ctrl"> <greeting person="{firstName: 'Bob', lastName: 'Jones'}"></greeting> </div> and JavaScript: var app = angular.module('myApp', []); app.controller("Ctrl", function($scope) { }); app.directive("greeting", function () { return { restrict: "E", replace: true, scope: { person: "=" }, template: '<p>Hello {{person.firstName}} {{person.lastName}}</p>' }; }); Although this works, it also causes a JavaScript error: Error: 10 $digest() iterations

AngularJS: ng-src behavior on non-standard attributes?

阅读更多关于 AngularJS: ng-src behavior on non-standard attributes?

I'm integrating a media player in my app using the " Video For Everybody " generator. As the player features a fallback to flash if the browser doesn't support HTML5 video and audio I have to build an object element with param attributes with the video and placeholder (image) source. As expected I run into the classical problem of expressions not being resolved in time, my browser sends requests to my.media.com/{{video.src}} rather then my.media.com/somevideo.mp4 Unfortunately there are several attributes ( poster, flashvars, placeholder to name a few) where I face the same problem. How would

jQuery slider not working in angularjs

阅读更多关于 jQuery slider not working in angularjs

My slider wont come up on first time navigation of the page. However when I hard refresh the page then it comes up and also if I replace the <div ng-view></div> code with the front.html page content then also the slider starts working. Let me know what I am doing wrong in angular as I believe it is something basic that I am missing. Following is my layout code - <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8" /> <title>WEBSITE</title> <link rel="stylesheet" href="assets/css/style.css" /> <link rel="stylesheet" href="assets/css/flexslider.css" type="text/css" media="screen" /

What is the difference between ng-class and ng-style?

阅读更多关于 What is the difference between ng-class and ng-style?

问题 ng-class and ng-style both seem to be methods of dynamically setting CSS classes. What is the difference between them? 回答1: ng-style is used to interpolate javascript object into style attribute, not css class. Following directive will be translated to style="color:red" ng-style="{color: 'red'}" And ng-class directive translates your object into class attribute. Following will be translated to class="deleted" when isDeleted variable is true . ng-class="{'deleted': isDeleted}" Note: There is

How to implement jQuery range slider in AngularJS

阅读更多关于 How to implement jQuery range slider in AngularJS

问题 I am trying to use anuglar-slider in my existing AngularJS app. I followed the author's comments here I downloaded below files (in Head tag) from author's github and added in my index.html HTML code : <head> <link rel="stylesheet" href="css/angular-slider.css"> <script src="js/vendor/angular-slider.js"></script> </head> <body> <slider floor="10" ceiling="60" ng-model-low="lowValue" ng-model-high="highValue"></slider> </body> App.js (Angular code) . I added second line as per Author's

Passing variable to directive template without creating new scope

阅读更多关于 Passing variable to directive template without creating new scope

Is there a way to pass variables using attributes to a directive without creating a new scope ? HTML <div ng-click='back()' button='go back'></div> JS .directive('button', function () { return { scope: { button: '@' }, template: "<div><div another-directive></div>{{button}}</div>", replace: true } }) The problem is that the ng-click='back()' now refers to the directive scope. I still can do ng-click='$parent.back()' but it's not what I want. Mark Rajcok By default, directives do not create a new scope. If you want to make that explicit, add scope: false to your directive: <div ng-click='back()

compile angular on an element after angular compilation has already happened

阅读更多关于 compile angular on an element after angular compilation has already happened

I'm writing a directive and when clicked it loads a html template from the server. How can I get angular to compile this? EDIT: I should probably mention the template is used for loading into a modal. You can inject the $compile service and $compile it whenever you want. $compile('<p>{{total}}</p>')(scope) is the example from the docs . In practice you'll probably want to do something like this: //Example as a directive's link function function link(scope, element, attributes){ scope.name = "world"; template = "<p>hello {{name}}</p>"; //this could come from anywhere element.html(template);