angularjs-directive

问题 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. 回答1: 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

问题 I'm using ui-router in a AngularJS project where I have a nested view that contains a custom directive. This directive renders an input field (lets say a filter-field) and its value should be in sync with the controller's scope. This works well for this directive, when the view/state not is nested: jsFiddle / not nested / working as expected var myApp = angular.module('myApp', ['ui.router', 'myComponents']) .config(['$stateProvider', function ($stateProvider) { $stateProvider. state('home', {

问题 EDIT: after asking the question, i'm now editing this to elaborate on my findings. My app is modularized using directives. I'm writing my directives such that they (1) create their own scope (2) use templateUrl, and (3) do most of the logic and server data fetching in their controller. The question is how to unit test it, using Mocha with Karma. 回答1: a test is written for each directive. Since the directive uses templateUrl, I used html2js. the html key should be included as a module - that

问题 EDIT: after asking the question, i'm now editing this to elaborate on my findings. My app is modularized using directives. I'm writing my directives such that they (1) create their own scope (2) use templateUrl, and (3) do most of the logic and server data fetching in their controller. The question is how to unit test it, using Mocha with Karma. 回答1: a test is written for each directive. Since the directive uses templateUrl, I used html2js. the html key should be included as a module - that

问题 I am trying to build a directive with angular. Here is the plunker I wanted to split it into 3 directives: Top, grand-parent directive. - many DAYS Middle, created with ng-repeat - one DAY Bottom, created with ng-repeat - many TIME BLOCKS angular .directive('dateTimeBlocks', [function dateTimeBlocksDirective () {}]) .directive('dayBlock', [function dayDirective () {}]) .directive('timeBlock', [function timeBlockDirective () {}]) I wanted to create middle and bottom directives with isolated

问题 I have a page that contains an ng-repeat directive. The ng-repeat works when the page first loads, but I want to be able to use ng-click to refresh the contents of the ng-repeat . I have tried the following code but it doesn't work. Any suggestions? <div ng-click="loadItems('1')">Load 1st set of items</div> <div ng-click="loadItems('2')">Load 2nd set of items</div> ... <table> <tr ng-repeat="item in items">> // stuff </tr> </table> ItemsCtrl: $scope.loadItems = function (setID) { $http({ url:

问题 Let's say I have: directives.directive('foo', function () { return { restrict:'A', scope: true, link:function (scope, element, attr) { console.log('innerHTML is ' + element.innerHTML); scope.$watch('update', function (newValue) { console.log('innerHTML is... ' + element.innerHTML); }); } } }); ... then innerHTML is undefined. I imagine this is due to the way Angular processes the DOM. What is the right way to obtain the innerHTML? 回答1: The element variable that is passed to your link function

问题 Let's say I have: directives.directive('foo', function () { return { restrict:'A', scope: true, link:function (scope, element, attr) { console.log('innerHTML is ' + element.innerHTML); scope.$watch('update', function (newValue) { console.log('innerHTML is... ' + element.innerHTML); }); } } }); ... then innerHTML is undefined. I imagine this is due to the way Angular processes the DOM. What is the right way to obtain the innerHTML? 回答1: The element variable that is passed to your link function

问题 When I've wrapped Slick Grid plugin into directive, some Slick Grid options (resizing and drag & drop columns) do not work. I think those events may conflict with directive. Does anyone have any insight? my html: <div style="width:600px;height:500px;" s-grid></div> my directive: angular.module('slickGrid.directive', []) .directive('sGrid', [function () { return { restrict: 'EA', link : function(scope, element, attrs){ // for clearer present I initialize data right in directive // start init

问题 I'm trying to pass some data from directive into a function addTrackFromPicker in my controller. $scope.addTrackFromPicker = function (message) { console.log("addTrackFromPicker", message); }; Here what I have in my directive dir.directive('youtubeList', function($http, $timeout, YT_event){ return { restrict: 'E', scope: { search: '=', dial: '&' }, templateUrl: 'youtube-list.html', ... Here I want to call controllers function from my template and pass it item.id.$t as argument: <div class=