angularjs-directive

问题 I had the idea to wrap inputs into custom directives to guarantee a consistent look and behavior through out my site. I also want to wrap bootstrap ui's datepicker and dropdown. Also, the directive should handle validation and display tooltips. The HTML should look something like this: <my-input required max-length='5' model='text' placeholder='text' name='text'/> or <my-datepicker required model='start' placeholder='start' name='start'/> in the directives i want to create a dom structure

问题 I have created an angular directive for my jQuery UI datepicker. The problem is that the directive doesn't update the input's ng-model when a date is selected. Any idea why? http://jsbin.com/ufoqan/1/edit 回答1: AngularJS actually provides a special controller for interacting with ngModel that you can use inside your directives; just add require: 'ngModel' to your directive definition. This gives you a fourth paramter to your link function, which is the controller you asked for in require --in

问题 I have a problem with setting the selected item in angular's select directive. I don't know if this is a bug or a conscious design from the designers of angular. It sure makes the select directive a lot less useful though. Description: My app communicates with a REST API to receive an entity from the database. The API dictates that relations of the object are sent with an ID property only so that you can retrieve them in subsequent requests if needed. Example: { id : 1, customerName : "some

问题 Can i pass NgModelController to directive controller? That's required so i can assign values to model in controller. This example does not work: angular .module('directives.selectBox', []) .directive('selectBox', selectBox); function selectBox() { return { restrict : 'E', require : 'ngModel', scope : { list : '=', }, replace : true, templateUrl : 'common/directives/selectBox/selectBox.html', controller : SelectBoxController, }; } function SelectBoxController(ngModel) { ngModel.$setViewValue

问题 Should it be associated with the app module? Should it be a component or just a controller? Basically what I am trying to achieve is a common layout across all pages within which I can place or remove other components. Here is what my app's structure roughly looks like: -/bower_components -/core -/login --login.component.js --login.module.js --login.template.html -/register --register.component.js --register.module.js --register.template.html -app.css -app.module.js -index.html 回答1: This

问题 Is it possible to programmatically get the original transcluded content within an Angular.js directive? I'm trying to create an an editable directive which can be added to any div, allowing the user to edit the HTML content with custom angular directives. (The design goal is to avoid the need to add infinite configuration GUI features in the app, as power users can just edit the HTML...), e.g.: <div editable> <h1>Lorem Ipsem</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...<

问题 I have the following HTML: <div style="border:1px solid; height:300px; width:500px; position:relative; left:100px" id="canvas"> <tbox ng-repeat="tb in textBoxes" ng-model="tb"> </tbox> </div> And the following 2 directives appModule.directive('resizable', function($compile, $document) { return { restrict: "A", template: '<div ng-style="{top:tb.x, left:tb.y, height:tb.height, width:tb.width}" ng-transclude><span class="scale">s</span></div>', transclude: true, replace: true, require: 'ngModel'

问题 I'm turning a piece of a non-angular web page into an Angular version by angular.bootstrapping it with an Angular module. It works great except for the fact that it needs to communicate with the other parts of the page. Unfortunately I cannot convert the rest of the page to Angular at this time. The best way I've figured to do this so far is by firing vanilla JS events on the bootstrapped element containing the information I need to communicate. Are there established patterns or better ways

问题 This should not be too hard a thing to do but I cannot figure out how best to do it. I have a parent directive, like so: directive('editableFieldset', function () { return { restrict: 'E', scope: { model: '=' }, replace: true, transclude: true, template: ' <div class="editable-fieldset" ng-click="edit()"> <div ng-transclude></div> ... </div>', controller: ['$scope', function ($scope) { $scope.edit = -> $scope.editing = true // ... ] }; }); And a child directive: .directive('editableString',

问题 As you know, it is possible to initialize objects as follows: <div ng-init="friends = [{name:'John', phone:'555-1276'}, {name:'Mary', phone:'800-BIG-MARY'}, {name:'Mike', phone:'555-4321'}, {name:'Adam', phone:'555-5678'}, {name:'Julie', phone:'555-8765'}, {name:'Juliette', phone:'555-5678'}]"></div> Is it possible to define object similar like this but via a function: <div ng-init="init()"> My aim is actually taking the objects from an API and show them in a list via ng-repeat 回答1: The