angularjs-directive

AngularJS Directive for twitter bootstrap form-group

由 喜夏-厌秋 提交于 2020-01-31 17:44:20
问题 I've been playing with angular lately, so far so good, but im struggling with directives. I'm trying to create a directive that generates the html mark up for a standard bootstrap form group with its corresponding validation messages. So basically I'm trying to convert this: <form-group label="Password"> <input type="password" data-ng-model="vm.password" name="password" id="password" class="form-control form-control-validate" required data-ng-minlength="6" data-required-error="Password is

Angular apply class in directive

由 五迷三道 提交于 2020-01-30 08:36:24
问题 I have a angular directive which will produce bootstrap form-group, looks for $scope.errors for value of ng-model of the directive to show errors.. Example below: My html code: <input type="text" b-input ng-model="data.company.name" label="Company Name" class="form-control"/> and my directive code: app.directive('bInput', function ($compile) { return { restrict: 'EA', replace: true, link: function (scope, element, attrs) { var div = $('<div>', { 'class': 'form-group', 'ng-class': " 'has-error

{{$index}} of ng-repeat computed after linker function of angular directive. $compile it?

由 ♀尐吖头ヾ 提交于 2020-01-28 10:41:05
问题 html <div repeater ng-repeat='item in items' class='first' id = '{{$index}}' > {{item}} </div> angularjs directive:- angular.module('time', []) .directive('repeater', function() { var linkFn = function(scope, element, attrs){ var id = $(element).attr('id'); alert(id); // {{$index}} } ... dynamic id created inside ng-repeat, when evoked inside directive displays as {{$index}} instead of value = 0, 1, 2 ... How do you ensure when Linker function in directive executes the dynamic ids are used? I

Angular: Building a directive and remove attribute from root element

由 拟墨画扇 提交于 2020-01-25 07:16:11
问题 Is it possible to do something like this: <field:text id="foo" label="Foo Label" model="model.foo" placeholder="foo" /> which would be compiled to: <div class="control-group"> <label class="control-label" for="foo">Foo Label</label> <div class="controls"> <input type="text" id="foo" placeholder="foo" ng-model="model.foo"> </div> </div> I tried to make a example, but Plunker wouldn't let me save my example... uploaded it to dropbox: https://dl.dropbox.com/u/2862814/plunk.zip The example breaks

AngularJS custom directive within ng-repeat with dynamic attributes and two way binding

由 天涯浪子 提交于 2020-01-25 04:46:28
问题 I'm banging my head on the wall over this for days and finally decided to post this question since I can't find an answer that matches what I'm trying to do. Context: I'm building a dynamic form building platform that describes form elements in a JSON structure like this - { "name": "email", "type": "email", "text": "Your Email", "model": "user.profile.email" } And then in the View I have a recursive ng-repeat that includes the field template like this - <script type="text/ng-template" id=

Angular directive does not update as scope updates

由 风格不统一 提交于 2020-01-25 04:22:45
问题 I'm puzzled by the apparent failure of my directive to update whenever its scope updates. I want to add up the characters in 3 different form fields, subtract that length from 29 (cause of reasons...), and output that total as a string in a piece of DOM contained in the directive template. Directive: return { restrict: 'AE', replace: true, templateUrl: '<span>{{remainingChars}} remaining</span>', scope: { checktype: '=', checknumber: '=', depositnote: '=' }, link: function (scope, elem) {

How can I inherit complex properties from the parent scope into my directive's isolated scope

由 北城以北 提交于 2020-01-24 10:21:31
问题 After reviewing AngularJS (and related) documentation and other stackoverflow questions regarding isolated scopes within directives, I'm still a little confused. Why can't I do a bi-directional binding between the parent scope and directive isolated scope, where the parent scope property is an object and not an attribute? Should I just use the desired property off scope.$parent ? That seems wrong. Thanks in advance for your help. The related fiddle is here. HTML: <div ng-app="myApp"> <div ng

Unknown provider: $templateRequestProvider <- $templateRequest <- $route <- ngViewDirective

由 半世苍凉 提交于 2020-01-24 07:19:53
问题 I'm just starting with angular.js and I watched some older tuts. where ng-route was not a dependency, so I have changed my code and added <script src="js/vendor/angular-route.js"></script> in html, but I'm getting the same error Unknown provider: $templateRequestProvider <- $templateRequest <- $route <- ngViewDirective HTML: <!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>test</title

Same “controller as” name in angular js directive breaks function in parent controller

由 浪尽此生 提交于 2020-01-24 06:46:04
问题 I've a controller with some items for ng-repeat and each item should get a random color so I use ng-style with a function in that controller called randColor(...) . app.controller('TestController', function() { var vm = this; vm.items = [ { name: 'item 1' } , { name: 'item 2'} ]; vm.randColor = function (item) { if (!item) { return 'red'; } else if (!item.color) { var color = 'rgb(' + _.random(0, 255) + ',' + _.random(0, 255) + ',' + _.random(0, 255) + ')'; item.color = color; } return item

Angular insecure url

由 大兔子大兔子 提交于 2020-01-24 06:31:33
问题 I'm using this directive to use jCrop with Angular: http://plnkr.co/edit/Z2IQX8s9UK6wQ1hS4asz?p=preview When I load in a value for src , I get this error: Can't interpolate: {{profileImg}} Error: [$sce:insecurl] Then it links me to a page that says this: Blocked loading resource from url not allowed by $sceDelegate policy. My html is this: <img-cropped src={{profileImg}} selected='selected(cords)'/> And this error happens when I change $scope.profileImg to the url of my image. I'm linking to
订阅 angularjs-directive