タグ付けされた質問 「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変数を変更することで、Angularを使用してこれを行います。 $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> これは正常に機能しますが、読み込みアイコン（ion-refreshing）が約2秒間表示され、$ scope変数はすぐに更新されます。$ scope。$ applyを試しましたが、ここでは問題はないようです。スコープは正常に更新され、リクエストの直後に更新されます。十分な速さで応答しないのはアイコンだけです。 私がこれを理解するのを手伝ってくれてありがとう！

87 angularjs  angularjs-directive  ionic-framework 

Angular 2で、入力フィールド（テキストボックス）をマスクして、アルファベット文字ではなく数字のみを受け入れるようにするにはどうすればよいですか？ 次のHTML入力があります。 <input type="text" *ngSwitchDefault class="form-control" (change)="onInputChange()" [(ngModel)]="config.Value" (focus)="handleFocus($event)" (blur)="handleBlur($event)" /> 上記の入力は一般的なテキスト入力であり、単純なテキストフィールドとして、またはたとえば年を示すための数値フィールドとして使用できます。 Angular 2を使用して、同じ入力コントロールを使用し、このフィールドにある種のフィルター/マスクを適用して、数値のみを受け入れるようにするにはどうすればよいですか？ これを達成するためのさまざまな方法は何ですか？ 注：入力番号タイプを使用せずに、テキストボックスのみを使用してこれを実現する必要があります。

87 html  angular  input  angularjs-directive 

あるディレクティブのコントローラーを別の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 

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-patternangularディレクティブを利用していることです。私が直面している問題は、ユーザーが無効な電話番号を入力した場合、その入力を無効にするチェックボックスをオンにすると（したがって、それ以上の検証は必要ありません）、ng-patternに基づいて無効であるため、フォームは送信を許可しません。 ng-change関数を追加して入力モデルをnullに設定することでこの問題を解決しようとしましたが、ng-pattern、したがってフィールドはチェックボックスの初期セットでfalseに設定されたままです。ただし、チェックボックスをオフにして、すべてを最初のフォームの読み込みに戻し、もう一度チェックボックスをオンにすると、フォームは有効になり、送信できるようになります。何が欠けているのかわかりません。これが私がこれまでに持っている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) …

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 そうですreplace動作しません。私は何かが恋しいですか？ ライブデモ：http：//plnkr.co/edit/rGIgmjO81X2UxJohL4HM？p …

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