angularjs-directive | 易学教程

Working with two modules in AngularJS

阅读更多关于 Working with two modules in AngularJS

问题 I have two modules with different operations and I tried to work with them as shown below. <div id="viewBodyDiv" ng-app="xhr"> <div ng-controller="xhrCtrl"> <button ng-click="callAction()">Click</button> {{sample}} </div> </div> <div id="viewBodyDiv2" ng-app="xhr2"> <div ng-controller="xhr2Ctrl"> <button ng-click="alertMessage()">Click</button> </div> </div> The JS is shown below. angular.module('xhr', []).controller('xhrCtrl', function ($http, $scope, $window) { $scope.sample = "sadf";

how to reduce the height of header in tabel view or grid view?

阅读更多关于 how to reduce the height of header in tabel view or grid view?

问题 I am trying to make simple demo of grid view .In which I have header of title (having gray background) actually I need to reduce the height of title or headers of table which have gray background .can we add alternate color of rows ? please see the given image .It header or tittle is too small as compared to my plunker .Secondly there is alternate color in row .can we add that in my plunker . http://plnkr.co/edit/7bSnk0fU0NBOF1GIwHSK?p=preview .search.list-inset, .search.list-inset .item

Howto mock a service used in a directive

阅读更多关于 Howto mock a service used in a directive

问题 We have the following directive : (function() { 'use strict'; ff.directive('mySwitchUserDirective', mySwitchUserDirective); mySwitchUserDirective.$inject = ['SessionService']; function mySwitchUserDirective(SessionService) { var directive = { restrict: 'E', template: '<img ng-src="{{userImage}}" width="35px" style="border-radius: 50%; max-height: 35px;" />', link: linkFunc }; return directive; function linkFunc(scope, element, attrs, ctrl) { scope.userImage = SessionService.get().authUser

Angularjs directive clicking elements

阅读更多关于 Angularjs directive clicking elements

问题 Hi I was wondering when I have a list of elements from a ng-repeat, how I can allow the user to click one of the list and make it highlight via .css(). Then if the user clicks another element, the previous element un-highlights and the newly-clicked element highlights? Thanks 回答1: You may try to use ng-click to set the selected item and apply a conditional css class with ng-class: <ul> <li ng-repeat="item in list" ng-class="{'highlight': model.selected == item}"> <button ng-click="model

ngModel needs $parent when within Transcluded html

阅读更多关于 ngModel needs $parent when within Transcluded html

问题 I have a directive for a input field that uses transclusion to take the elements that are enclosed in the directives element which includes an ng-model attribute. After reading countless SO questions and Angular documentation to find out how to get the ng-model in the transcluded html to sync with the ng-model in my directive I finally stumbled stumbled upon a trick to get it to work. That is to use $parent where the ng-model is within the input field. This is all fine and dandy, however, it

Set $modelValue without changing $viewValue

阅读更多关于 Set $modelValue without changing $viewValue

问题 In angular 1.2 I need to be able to update the $modelValue without affecting the $viewValue . I want the internal value to be one value, while what the user sees to be another. The problem I am having is setting the $modelValue ends up setting the $viewValue on the next digest. My current work-around is using $timeout to set the $viewValue in the next digest. //... link: function(scope, elem, attrs, ctrl) { //... var setter = $parse(attrs.ngModel).assign; scope.$watch(attrs.otherValue,

unable to pass parameter to angular directive

阅读更多关于 unable to pass parameter to angular directive

问题 I want to initiate a third party control (bootstrap-select) after a collection has been assigned to a source variable. For that I am using a directive and watching a collection like this. angular .module('app').directive('bootstrapDropdown', ['$timeout', function ($timeout) { return { restrict: 'A', scope: { collectionName: '=' }, require: '?ngModel', link: function (scope, el, attrs) { el.selectpicker(); scope.$watchCollection(scope.collectionName, function (newVal) { $timeout( function () {

Force IE compatibility mode off in IE using tags for browser mode

阅读更多关于 Force IE compatibility mode off in IE using tags for browser mode

问题 I am using html5 with angularJs using follwoing tag This results in Browser mode set to IE8 Compat, and Document mode set to IE8 Standards. <!doctype html> <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="myApp"> <meta http-equiv="X-UA-Compatible" content="IE=8" /> This results in Browser mode="IE8 Compat" and Document mode="IE8 Standards". How can i force for the IE Document Mode=IE8 Standards too, so my stuff will start working 回答1: You want IE=edge , it will force the browser to

In Angular, directive that compiles template with ui-sortable, run twice with connected lists cannot drag-drop between both lists

阅读更多关于 In Angular, directive that compiles template with ui-sortable, run twice with connected lists cannot drag-drop between both lists

问题 I have a custom Angular directive, which uses ui-sortable in the template. Originally I could not get it to recognize the ui-sortable , but now it works based on How do I include other directives in the template of my customer directive in Angular? Problem now is if I run it twice, and thus have two sortable lists, with the appropriate class on both and connectWith option, I cannot drag and drop from one to the other. <div members list="list1" title="{{title1}}" admin={{admin}}> </div> <div

AngularJS UI Bootstrap “btn-radio” directive doesn't work

阅读更多关于 AngularJS UI Bootstrap “btn-radio” directive doesn't work

问题 Live Demo Could anyone explain why the first two button groups work, but the third one doesn't? <div class="btn-group"> <button ng-repeat="company in companies" class="btn" ng-model="radioModel.id" btn-radio="company.id"> {{company.name}} </button> </div> <div class="btn-group"> <button class="btn btn-two" ng-model="radioModel.id" btn-radio="2"> two </button> <button class="btn btn-two" ng-model="radioModel.id" btn-radio="3"> three </button> </div> <div class="btn-group"> <button ng-repeat=