directive

问题 I can't make Karma working for directives that have external templates. Here is my karma configuration file : preprocessors: { 'directives/loading/templates/loading.html': 'ng-html2js' }, files: [ ... 'directives/loading/templates/loading.html', ] ngHtml2JsPreprocessor: { prependPrefix: '/app/' }, In the directive file : ... templateUrl: '/app/directives/loading/templates/loading.html' ... In the spec file : describe('Loading directive', function() { ... beforeEach(module('/app/directives

问题 I am trying to use directive to create and append several tags to a <div> as shown below: module.directive('createControl', function(){ return function(scope, element, attrs){ console.log(attrs.createControl); // undefined } }); <div class="control-group" ng-repeat="(k, v) in selectedControls"> <div create-control="{{ v.type }}"></div> </div> In attrs I have this construction: $$element: b.fn.b.init[1] $$observers: Object $attr: Object createControl: "date" style: "margin-right: 15px" __proto

问题 I use this directive. However, on the setAddress event output, no changes are detected in my component. The view is not updated. I d'ont understand. For test, if i remove the google.maps.event.addListener to replace by a simple setTimeout to call invokeEvent. It works. @Directive({ selector: '[googleplace]', providers: [NgModel], host: { '(input)' : 'onInputChange()' } }) export class GoogleplaceDirective { @Output() setAddress: EventEmitter<any> = new EventEmitter(); modelValue:any;

问题 I want to use a directive to transform all input data to uppercase. To achieve that, I create this custom directive : @Directive({ selector: '[appToUpperCase]' }) export class ToUpperCaseDirective { constructor() {} @HostListener('input', ['$event']) onKeyUp(event) { event.target['value'] = event.target['value'].toUpperCase(); } } And I use it like that : <form [formGroup]="formGroup" appToUpperCase> It works almost good exept that when I enter text in my field, the upper case transform is

问题 When I use custom directive to change component's value, there is not effect: Vue.directive('maxchars', { bind(el, binding, vnode) { let maxChars = binding.value; let handler = function(e) { if (e.target.value.length > maxChars) { e.target.value = e.target.value.substr(0, maxChars) } } el.addEventListener('input', handler); } }); let app = new Vue({ el: '#app', data() { return { content: '', totalCount: 140 } } }) <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script> <div id='app'>

问题 I'm trying to update the value of an Ion.RangeSlider when its bound ng-model scope variable changes. The model updates when the Ion.RangeSlider is used, but not vice-versa. Other inputs with the same ng-model update when the model value changes, so this must be some special case. Edit: Woo! Here's a snippet @lin :) Also jsfiddle. var app = angular.module('ngModelIonRangeSliderDemo', []); app.controller('MainCtrl', function ($scope, $rootScope, $timeout) { $scope.someNumber = 10; }).directive(

问题 What's going on here? Here are my directives: // template <input ng-model="theModel" /> app.directive('bseInput', function () { return { templateUrl: "/Scripts/bse/bse-inputs.html", scope: { theModel: '=', }, compile: function compile(tElement, tAttrs, transclude) { // do stuff } }; }); app.directive('submitRequired', function (objSvc) { return { require: 'ngModel', link: function (scope, elm, attrs, ctrl) { // do something } }; }); Here is an example of the directive in use: <input bse-input

问题 I have the following code, which can also be fiddled on http://jsfiddle.net/garukun/u69PT/. View: <div data-ng-app="testApp"> <div data-ng-controller="testCtrl"> <strong>{{pkey}}</strong> <span data-test-directive data-parent-item="pkey" data-parent-update="update(pkey)"></span> </div> </div> JS: var testApp = angular.module('testApp', []); testApp.directive('testDirective', function ($timeout) { return { scope: { key: '=parentItem', parentUpdate: '&' }, replace: true, template: '<div><p>{

问题 I have the following code, which can also be fiddled on http://jsfiddle.net/garukun/u69PT/. View: <div data-ng-app="testApp"> <div data-ng-controller="testCtrl"> <strong>{{pkey}}</strong> <span data-test-directive data-parent-item="pkey" data-parent-update="update(pkey)"></span> </div> </div> JS: var testApp = angular.module('testApp', []); testApp.directive('testDirective', function ($timeout) { return { scope: { key: '=parentItem', parentUpdate: '&' }, replace: true, template: '<div><p>{

问题 I've got an AngularJS attribute directive, and I would like to take an action any time its parent input's value changes. Right now I'm doing it with jQuery: angular.module("myDirective", []) .directive("myDirective", function() { return { restrict: "A", scope: { myDirective: "=myDirective" }, link: function(scope, element, attrs) { element.keypress(function() { // do stuff }); } }; }); Is there a way to do this without jQuery? I'm finding the keyPress event isn't doing exactly what I want it