Questions tagged «angularjs-directive»

我在AngularJS中使用ngChange来触发自定义函数，该函数将删除用户添加到输入中的所有字母。 <input type="text" name="inputName" data-ng-change="numbersOnly()"/> 问题是我需要定位触发的输入，numbersOnly()以便删除输入的字母。我在Google上花了很长时间苦苦寻找，却找不到任何与此相关的信息。 我能做什么？

92 javascript  angularjs  angularjs-directive 

为什么replace=true还是replace=false没有在下面的代码产生任何影响？ 当replace = false时为什么不显示“某些现有内容”？ 或者更谦虚地讲，您能否解释replace=true/false指令中的功能以及如何使用它？ 例 JS /角度： <script> angular.module('scopes', []) .controller('Ctrl', function($scope) { $scope.title = "hello"; }) .directive('myDir', function() { return { restrict: 'E', replace: true, template: '<div>{{title}}</div>' }; }); </script> HTML： <div ng-controller="Ctrl"> <my-dir><h3>some existing content</h3></my-dir> </div> 在此处查看Plunker： http://plnkr.co/edit/4ywZGwfsKHLAoGL38vvW?p=preview

91 angularjs  angularjs-directive 

这是主模板的控制器： app.controller('OverviewCtrl', ['$scope', '$location', '$routeParams', 'websiteService', 'helperService', function($scope, $location, $routeParams, websiteService, helperService) { ... $scope.editWebsite = function(id) { $location.path('/websites/edit/' + id); }; }]); 这是指令： app.directive('wdaWebsitesOverview', function() { return { restrict: 'E', scope: { heading: '=', websites: '=', editWebsite: '&' }, templateUrl: 'views/websites-overview.html' } }); 这是在主模板中应用指令的方式： <wda-websites-overview heading="'All websites'" websites="websites" edit-website="editWebsite(id)"></wda-websites-overview> …

90 javascript  angularjs  angularjs-directive  angularjs-scope 

我正在尝试在请求繁忙时在按钮上显示或隐藏加载指示器。我通过在加载请求或加载完成后更改$ scope.loading变量来实现此目的。 $scope.login = function(){ $scope.loading = true; apiFactory.getToken() .success(function(data){ }) .error(function(error){ }) .finally(function(){ $timeout(function() { $scope.loading = false; }, 0); }); }; 在前端： <button ng-disabled="loading" class="button button-outline button-positive" type="submit"> Log in <span ng-if="loading" class="ion-refreshing"></span> </button> 这可以正常工作，但是加载图标（离子刷新）显示约2秒钟，而$ scope变量立即更新。我尝试了$ scope。$ apply，但这似乎不是问题所在，作用域可以在请求后立即更新。只是图标没有足够快地响应。 感谢您帮助我理解这一点！

87 angularjs  angularjs-directive  ionic-framework 

谁能告诉我如何将一个指令中的控制器包含在另一个angularJS指令中。例如我有以下代码 var app = angular.module('shop', []). config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/', { templateUrl: '/js/partials/home.html' }) .when('/products', { controller: 'ProductsController', templateUrl: '/js/partials/products.html' }) .when('/products/:productId', { controller: 'ProductController', templateUrl: '/js/partials/product.html' }); }]); app.directive('mainCtrl', function () { return { controller: function ($scope) {} }; }); app.directive('addProduct', function () { return { restrict: 'C', …

86 javascript  angularjs  angularjs-directive 

在Angular 2中，如何屏蔽输入字段（文本框），使其仅接受数字而不接受字母字符？ 我有以下HTML输入： <input type="text" *ngSwitchDefault class="form-control" (change)="onInputChange()" [(ngModel)]="config.Value" (focus)="handleFocus($event)" (blur)="handleBlur($event)" /> 上面的输入是通用文本输入，可以用作简单文本字段或用作数字字段，例如以显示年份。 使用Angular 2，我如何使用相同的输入控件并在此字段上应用某种过滤器/掩码，以使其仅接受数字？ 我可以通过哪些不同的方式实现这一目标？ 注意：我需要仅使用文本框而不使用输入数字类型来实现此目的。

86 html  angular  input  angularjs-directive 

我正在尝试ng-click使用自定义angularjs指令在上设置确认对话框： app.directive('ngConfirmClick', [ function(){ return { priority: 1, terminal: true, link: function (scope, element, attr) { var msg = attr.ngConfirmClick || "Are you sure?"; var clickAction = attr.ngClick; element.bind('click',function (event) { if ( window.confirm(msg) ) { scope.$eval(clickAction) } }); } }; }]) 这很好用，但不幸的是，未评估使用我的指令的标记内的表达式： <button ng-click="sayHi()" ng-confirm-click="Would you like to say …

85 javascript  angularjs  angularjs-directive  angularjs-scope 

我有一种形式，如果复选框为false，则使用ng-required指令对文本输入强制执行验证。如果复选框为true，则该字段被隐藏，并且ng-required设置为false。 问题是我还使用ng-pattern angular指令在输入上指定了用于验证的正则表达式。我遇到的问题是，如果用户填写了无效的电话号码，请选中该框以停用该输入（因此无需进一步验证），该表单将不允许提交，因为基于ng-pattern表单无效。 我试图通过添加ng-change函数将输入模型设置为null来解决此问题，但是ng-pattern以及因此在复选框的初始设置为false时该字段仍设置为invalid。但是，如果我取消选中该框，将所有内容都设置为初始表单加载，然后再次选中该框，则该表单有效并且可以提交。我不确定我缺少什么。这是我到目前为止拥有的ng-change代码： var phoneNumberRegex = /^\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})$/; $scope.phoneNumberPattern = phoneNumberRegex; $scope.removeValidation = function() { if ($scope.cell._newUser === false) { $scope.request._number = ''; $scope.phoneNumberPattern = /[0-9a-zA-Z]?/; } else { $scope.phoneNumberPattern = phoneNumberRegex; } };

84 angularjs  angularjs-directive  angularjs-ng-change 

使用隔离范围，伪指令的模板似乎无法访问控制器（'Ctrl'）$ rootScope变量，但是该变量确实出现在伪指令的控制器中。我了解为什么控制器（'Ctrl'）$ scope变量在隔离范围中不可见。 HTML： <div ng-app="app"> <div ng-controller="Ctrl"> <my-template></my-template> </div> <script type="text/ng-template" id="my-template.html"> <label ng-click="test(blah)">Click</label> </script> </div> JavaScript： angular.module('app', []) .controller('Ctrl', function Ctrl1($scope, $rootScope) { $rootScope.blah = 'Hello'; $scope.yah = 'World' }) .directive('myTemplate', function() { return { restrict: 'E', templateUrl: 'my-template.html', scope: {}, controller: ["$scope", "$rootScope", function($scope, $rootScope) { console.log($rootScope.blah); …

81 javascript  angularjs  angularjs-directive 

在此文档中：http : //docs.angularjs.org/guide/directive，其中说到replace指令有一个配置： template-用HTML的内容替换当前元素。替换过程将所有属性/类从旧元素迁移到新元素。有关更多信息，请参见下面的“创建组件”部分。 JavaScript代码 app.directive('myd1', function(){ return { template: '<span>directive template1</span>', replace: true } }); app.directive('myd2', function(){ return { template: '<span>directive template2</span>', replace: false } }); HTML代码 <div myd1> original content should be replaced </div> <div myd2> original content should NOT be replaced </div> 但是最后一页看起来像： directive template1 directive template2 …

81 angularjs  angularjs-directive 

在AngularJS中对隔离范围进行单元测试的好方法是什么 JSFiddle显示单元测试 指令段 scope: {name: '=myGreet'}, link: function (scope, element, attrs) { //show the initial state greet(element, scope[attrs.myGreet]); //listen for changes in the model scope.$watch(attrs.myGreet, function (name) { greet(element, name); }); } 我想，以确保指令监听的变化-这确实不是工作，一个孤立的范围： it('should watch for changes in the model', function () { var elm; //arrange spyOn(scope, '$watch'); //act elm …

81 javascript  unit-testing  angularjs  jasmine  angularjs-directive 

我一直在将自定义指令升级到新的组件体系结构。我读过，组件不支持观察者。它是否正确？如果是这样，您如何检测对象的变化？对于一个基本示例，我有一个自定义组件myBox，该组件具有一个子组件游戏，并带有对游戏的绑定。如果游戏组件中有找零游戏，如何在myBox中显示警告消息？我知道有rxJS方法可以纯粹在角度上做到这一点吗？我的JSFiddle 的JavaScript var app = angular.module('myApp', []); app.controller('mainCtrl', function($scope) { $scope.name = "Tony Danza"; }); app.component("myBox", { bindings: {}, controller: function($element) { var myBox = this; myBox.game = 'World Of warcraft'; //IF myBox.game changes, show alert message 'NAME CHANGE' }, controllerAs: 'myBox', templateUrl: "/template", transclude: true }) app.component("game", { bindings: …

78 angularjs  angularjs-directive  angularjs-scope  angularjs-components  angularjs-1.5 

我在解决如何使类在嵌套指令上进行更改时遇到麻烦。 这是外部ng-repeat <div data-courseoverview data-ng-repeat="course in courses | orderBy:sortOrder | filter:search" data-ng-controller ="CourseItemController" data-ng-class="{ selected: isSelected }"> 下面是使用另一个指令的内部ng-repeat <li data-ng-repeat="item in social" class="social-{{item.name}}" ng-mouseover="hoverItem(true);" ng-mouseout="hoverItem(false);" index="{{$index}}"><i class="{{item.icon}}" box="course-{{$index}}"></i></li> 这是指令im要求悬停事件 ecourseApp.directive("courseoverview", function() { return { restrict : 'A', replace: true, /*scope: { index: '@' },*/ transclude: true, templateUrl: "views/course-overview.html", link: function …

77 angularjs  angularjs-directive 

我正在尝试通过使用angular将背景图像应用于div ng-style（我之前尝试过使用具有相同行为的自定义指令），但是它似乎没有用。 <nav class="navigation-grid-container" data-ng-class="{ bigger: isNavActive == true }" data-ng-controller="NavigationCtrl" data-ng-mouseenter="isNavActive = true; $parent.isNavActive = true" data-ng-mouseleave="isNavActive = false; $parent.isNavActive = false" data-ng-show="$parent.navInvisible == false" data-ng-animate="'fade'" ng-cloak> <ul class="navigation-container unstyled clearfix"> <li class="navigation-item-container" data-ng-repeat="(key, item) in navigation" data-ng-class="{ small: $parent.isNavActive, big: isActive == true }" data-ng-mouseenter="isActive = true; isInactive= …

76 javascript  angularjs  angularjs-directive  angularjs-ng-repeat  ng-style 

此自定义验证指令是官方角度网站上提供的示例。 http://docs.angularjs.org/guide/forms会 检查文本输入是否为数字格式。 var INTEGER_REGEXP = /^\-?\d*$/; app.directive('integer', function() { return { require: 'ngModel', link: function(scope, elm, attrs, ctrl) { ctrl.$parsers.unshift(function(viewValue) { if (INTEGER_REGEXP.test(viewValue)) { // it is valid ctrl.$setValidity('integer', true); return viewValue; } else { // it is invalid, return undefined (no model update) ctrl.$setValidity('integer', false); return undefined; } …

76 unit-testing  angularjs  angularjs-directive