คำถามติดแท็ก angularjs-directive

คำสั่ง AngularJS เป็นวิธีสอนเทคนิค HTML ใหม่ ๆ โดยขยายคำศัพท์ HTML คำสั่งอนุญาตให้คุณจัดการองค์ประกอบ DOM ในรูปแบบที่ประกาศซึ่งช่วยให้คุณพ้นจากภารกิจการจัดการ DOM ระดับต่ำ

2
จะใช้คุณสมบัติ 'แทนที่' สำหรับคำสั่ง AngularJS ที่กำหนดเองได้อย่างไร?
เหตุใดจึงมีreplace=trueหรือreplace=falseไม่มีผลกระทบใด ๆ ในโค้ดด้านล่างนี้ เหตุใดจึงไม่แสดง "เนื้อหาที่มีอยู่บางส่วน" เมื่อแทนที่ = 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

17
ฉันจะ จำกัด อินพุตให้ยอมรับเฉพาะตัวเลขได้อย่างไร
ฉันใช้ ngChange ใน AngularJS เพื่อเรียกใช้ฟังก์ชันที่กำหนดเองซึ่งจะลบตัวอักษรใด ๆ ที่ผู้ใช้เพิ่มลงในอินพุต <input type="text" name="inputName" data-ng-change="numbersOnly()"/> ปัญหาคือฉันต้องกำหนดเป้าหมายอินพุตที่ทริกเกอร์numbersOnly()เพื่อที่ฉันจะได้ลบตัวอักษรที่ป้อน ฉันดู Google มานานและยากมากและไม่พบอะไรเกี่ยวกับเรื่องนี้ ฉันจะทำอะไรได้บ้าง?

2
AngularJS Directive element การผูก - TypeError: ไม่สามารถใช้ตัวดำเนินการ 'in' เพื่อค้นหา 'functionName' ใน 1
นี่คือตัวควบคุมของเทมเพลตหลัก: 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> …

30
Angular2 - ช่องป้อนข้อมูลเพื่อยอมรับเฉพาะตัวเลข
ใน Angular 2 ฉันจะปิดบังช่องป้อนข้อมูล (กล่องข้อความ) เพื่อให้รับเฉพาะตัวเลขไม่ใช่ตัวอักษรได้อย่างไร ฉันมีอินพุต HTML ต่อไปนี้: <input type="text" *ngSwitchDefault class="form-control" (change)="onInputChange()" [(ngModel)]="config.Value" (focus)="handleFocus($event)" (blur)="handleBlur($event)" /> อินพุตด้านบนเป็นอินพุตข้อความทั่วไปซึ่งอาจใช้เป็นฟิลด์ข้อความธรรมดาหรือฟิลด์ตัวเลขตัวอย่างเช่นเพื่อแสดงปี การใช้ Angular 2 ฉันจะใช้ตัวควบคุมอินพุตเดียวกันและใช้ตัวกรอง / มาสก์บางประเภทในฟิลด์นี้ได้อย่างไรเพื่อให้ยอมรับเฉพาะตัวเลข วิธีต่างๆที่ฉันสามารถทำได้คืออะไร? หมายเหตุ: ฉันต้องการบรรลุสิ่งนี้โดยใช้กล่องข้อความเท่านั้นและไม่ได้ใช้ประเภทหมายเลขอินพุต

6
angular ng-if หรือ ng-show ตอบสนองช้า (ล่าช้า 2 วินาที?)
ฉันกำลังพยายามแสดงหรือซ่อนตัวบ่งชี้การโหลดบนปุ่มเมื่อคำขอไม่ว่าง ฉันทำเช่นนั้นด้วยเชิงมุมโดยการเปลี่ยนตัวแปร $ 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 วินาทีในขณะที่ตัวแปร $ ขอบเขตจะได้รับการอัปเดตทันที ฉันลองใช้ $ ขอบเขต …

2
วิธีต้องการตัวควบคุมในคำสั่ง angularjs
ใครช่วยบอกวิธีรวมคอนโทรลเลอร์จากคำสั่งหนึ่งในคำสั่ง 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 …

17
กล่องโต้ตอบการยืนยันบน ng-click - AngularJS
ฉันกำลังพยายามตั้งค่ากล่องโต้ตอบการยืนยัน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 …

7
Angularjs dynamic ng-pattern การตรวจสอบ
ฉันมีแบบฟอร์มว่าหากช่องทำเครื่องหมายเป็นเท็จบังคับใช้การตรวจสอบความถูกต้องในการป้อนข้อความโดยใช้คำสั่งที่จำเป็นต้องใช้ ng หากช่องทำเครื่องหมายเป็นจริงช่องจะถูกซ่อนไว้และกำหนดค่า ng-required เป็นเท็จ ปัญหาคือฉันยังมี regex สำหรับการตรวจสอบความถูกต้องที่ระบุไว้ในอินพุตด้วยเช่นกันโดยใช้คำสั่งเชิงมุมรูปแบบ ng ปัญหาที่ฉันพบคือหากผู้ใช้กรอกหมายเลขโทรศัพท์ที่ไม่ถูกต้องให้ทำเครื่องหมายที่ช่องเพื่อปิดการใช้งานข้อมูลนั้น (และไม่จำเป็นต้องตรวจสอบความถูกต้องเพิ่มเติม) แบบฟอร์มจะไม่อนุญาตให้ส่งเนื่องจากไม่ถูกต้องตามรูปแบบ ng ฉันพยายามแก้ไขปัญหานี้โดยเพิ่มฟังก์ชัน ng-change เพื่อตั้งค่ารูปแบบการป้อนข้อมูลเป็น null อย่างไรก็ตามรูปแบบ ng จึงยังคงตั้งค่าฟิลด์ไม่ถูกต้องในชุดเริ่มต้นของช่องทำเครื่องหมายเป็นเท็จ อย่างไรก็ตามหากฉันยกเลิกการเลือกช่องตั้งค่าทุกอย่างกลับไปที่การโหลดแบบฟอร์มเริ่มต้นจากนั้นทำเครื่องหมายที่ช่องอีกครั้งแบบฟอร์มนั้นถูกต้องและสามารถส่งได้ ฉันไม่แน่ใจว่าฉันขาดอะไรไป นี่คือรหัส 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]?/; } …
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.