angularjs-directive

问题 Disclosure: I'm new to angular, so if I'm doing something that appears strange or just plain wrong, feel free to point that out. I have a directive vpMap that I want to use like this: <div my-map with-tile-layers with-geolocator></div> I have a Map service that I want to decorate conditionally, based on the attributes of the directive that begin with with It looks something like this: angular.module('myApp.map',[]) .service('Map',someServiceFunction) .directive('myMap',['Map','$provide'

问题 I have a simple directive that displays three images. On mouse hover, it should switch from black and white to normal image. Below given is the code inside the directive. <div class="container"> <div class="row"> <div class="col-md-4"> <h3> Example 1</h3> <div class="fd-fade1 fd-effect"> <img src="http://i.imgur.com/yxAxCaK.jpg" class="fd-img1" alt=""> </div> <!-- /.fd-fade --> </div> <!-- /.col-md-4 --> <div class="col-md-4"> <h3> Example 2</h3> <div class="fd-fade2 fd-effect"> <img src=

问题 Am building a list of widgets with JSPlumb and AngularJS, i need to enable resize using the handler on each widget. There is an example already on it, i have implemented , but resize does not happen. here is my code, HTML: <div ng-controller="CustomWidgetCtrl" plumb-item class="item" resizeable> App.js: routerApp.directive('resizeable',function($compile){ return{ restrict: 'A', link: function(scope, element, attrs){ element.resizeable({ resize : function(event, ui) { jsPlumb.repaint(ui.helper

问题 I have a parent-child controller relationship between my <main> , <div> and <my-directive> as such: <main ng-controller="MainController"> <nav> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </nav> <div ng-controller="AboutController"> </div> <my-directive></my-directive> </main> Within the MainController, i perform a $broadcast with a: $scope.$broadcast('shoppingCartReady', msg); Within AboutController, i can successfully receieve this $broadcast via: angular.module('aboutModule', []

问题 I have a directive which replaces a select element with a custom input control. Here's a simplified version of it: angular.module('MyModule', []).directive('reflector', function($timeout) { return { require: 'ngModel', link: function(scope, element, attrs, ngModel) { element.insertAfter('<input type=text id="new-' + attrs.id + '" />'); element.hide() } }; }); I'd like this custom input control to reflect the valid/invalid state of the original select element, i.e. add the ng-invalid class

问题 http://plnkr.co/edit/fXo21LnphHZ3qWnuEMFt?p=preview Right now, if you click anywhere outside of the input, the focusMe directive scope.$watch will trigger and turn showingTagSearchInput false. This needs to only happen when the close x button is clicked. Markup <div class="sidebar" ng-controller="sidebar"> <div class="btn-search" ng-hide="showingTagSearchInput" ng-click="quickSearchTags()">Search</div> <div class="search-tags-input container-fluid" ng-show="showingTagSearchInput"> <input type

问题 When using the bs-dropdown with the "hover" trigger, the menu doesn't stay visible long enough to allow the user to click on a menu item: http://plnkr.co/edit/Fi39BdCOqHXnPAgITD01?p=preview Using a delay makes it behave in unexpected ways: http://plnkr.co/edit/Y2Q63DDJEyP9CTPMUfYD?p=preview Ideally the dropdown should stay up as long as the mouse is on the menu, and disappear when the mouse leaves the menu. 回答1: That is because hover pseudoevent's mouseleave gets triggered when you hover out

问题 I am trying to add a ng-class attribute to a custom directive from the link function. But when using compile function after adding the ng-class attribute, It throws an error like "RangeError: Maximum call stack size exceeded" Please see the code below MyApp.directive('twinField',function($compile){ return { restrict:'A', require:'ngModel', scope:{ fval:'=' }, link:function(scope,ele,attr,ctrl){ ctrl.$validators.compareTo=function(val){ //alert(scope.fval) return scope.fval==val } scope.$watch

问题 I'm trying to adapt this D3js line chart example of mouse-over usage to my multi-line chart. It seems that d3.mouse(this)[0] on the mousemove function generate the following error: "Cannot read property 'sourceEvent' of null". 1 Any idea why I get the null sourceEvent error ? 2 Any tips on how to adapt the mouse over example from a single line chart to a multi (n) line chart ? Here is a jsfiddle to demonstrate the issue. ( And the solution ) var myApp = angular.module('app', []); myApp

问题 I've using the excellent Angular UI bootstrap in a large site alongside lots of my own directives. For the sake of neatness I looked for a way of renaming a couple of the uib directives without touching their code and came across a couple of SO questions and what looked like a great solution. The trouble is that it's not working for me. Here's my code. angular.module('s4p').config(function($provide, $compileProvider){ console.log("I am logged in the console"); $provide.decorator(