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

ใช้สำหรับคำถามเกี่ยวกับ AngularJS (1.x), เฟรมเวิร์ก JavaScript แบบโอเพ่นซอร์ส อย่าใช้แท็กนี้สำหรับ Angular 2 หรือใหม่กว่า; ใช้แท็ก [angular] แทน

4
จะรอจนกว่าคำตอบจะมาจากคำขอ $ http ใน angularjs ได้อย่างไร
ฉันกำลังใช้ข้อมูลบางส่วนที่มาจากบริการ RESTful ในหลาย ๆ เพจ ดังนั้นฉันจึงใช้โรงงานเชิงมุมสำหรับสิ่งนั้น ดังนั้นฉันต้องได้รับข้อมูลหนึ่งครั้งจากเซิร์ฟเวอร์และทุกครั้งที่ฉันได้รับข้อมูลด้วยบริการที่กำหนดนั้น เช่นเดียวกับตัวแปรส่วนกลาง นี่คือตัวอย่าง: var myApp = angular.module('myservices', []); myApp.factory('myService', function($http) { $http({method:"GET", url:"/my/url"}).success(function(result){ return result; }); }); ในคอนโทรลเลอร์ของฉันฉันใช้บริการนี้ในฐานะ: function myFunction($scope, myService) { $scope.data = myService; console.log("data.name"+$scope.data.name); } มันทำงานได้ดีสำหรับฉันตามความต้องการของฉัน แต่ปัญหาคือเมื่อฉันโหลดซ้ำในหน้าเว็บบริการจะถูกเรียกอีกครั้งและขอเซิร์ฟเวอร์ หากอยู่ระหว่างฟังก์ชันอื่น ๆ ที่ดำเนินการซึ่งขึ้นอยู่กับ "บริการที่กำหนดไว้" จะทำให้ข้อผิดพลาดเช่น "บางสิ่ง" ไม่ได้กำหนด ดังนั้นฉันต้องการรอในสคริปต์ของฉันจนกว่าบริการจะโหลด ฉันจะทำเช่นนั้นได้อย่างไร? มีการทำ angularjs หรือไม่?

5
AngularJS - ฉันจะเปลี่ยนเส้นทางด้วยการโหลดเต็มหน้าได้อย่างไร
ฉันต้องการเปลี่ยนเส้นทางที่จะโหลดแบบเต็มหน้าซ้ำเพื่อให้คุกกี้จากเว็บเซิร์ฟเวอร์ของฉันได้รับการรีเฟรชเมื่อโหลดหน้าเว็บ window.location = "/#/Next"และwindow.location.href = "/#/Next"ไม่ทำงานพวกเขาทำเส้นทางเชิงมุมซึ่งไม่เข้าสู่เซิร์ฟเวอร์ อะไรคือวิธีที่ถูกต้องในการส่งคำขอเซิร์ฟเวอร์แบบเต็มภายใน Angular Controller?

3
ngModel. $ modelValue และ ngModel แตกต่างกันอย่างไร $ viewValue
ฉันมีคำสั่ง ckEditor ต่อไปนี้ ด้านล่างมีสองรูปแบบที่ฉันได้เห็นจากตัวอย่างวิธีการตั้งค่าข้อมูลในตัวแก้ไข: app.directive('ckEditor', [function () { return { require: '?ngModel', link: function ($scope, elm, attr, ngModel) { var ck = null; var config = attr.editorSize; if (config == 'wide') { ck = CKEDITOR.replace(elm[0], { customConfig: 'config-wide.js' }); } else { ck = CKEDITOR.replace(elm[0], { customConfig: 'config-narrow.js' }); } …
94 angularjs 

8
AngularJS: มีวิธีใดในการตรวจสอบว่าฟิลด์ใดที่ทำให้ฟอร์มไม่ถูกต้อง?
ฉันมีรหัสต่อไปนี้ในแอปพลิเคชัน AngularJS ภายในคอนโทรลเลอร์ซึ่งเรียกจากฟังก์ชัน ng-submit ซึ่งเป็นของฟอร์มที่มีชื่อprofileForm: $scope.updateProfile = function() { if($scope.profileForm.$invalid) { //error handling.. } //etc. }; ภายในฟังก์ชันนี้มีวิธีใดบ้างที่จะทราบว่าช่องใดที่ทำให้ฟอร์มทั้งหมดถูกเรียกว่าไม่ถูกต้อง

16
ข้อผิดพลาด AngularJS: 'อาร์กิวเมนต์' FirstCtrl 'ไม่ใช่ฟังก์ชันไม่ได้กำหนด'
ฉันสังเกตเห็นว่ามีการถามคำถามเดียวกันนี้สองสามครั้งที่นี่ฉันพยายามแก้ไข แต่ไม่มีอะไรช่วยได้ ฉันกำลังติดตามบทช่วยสอนนี้กับวิดีโอ Egghead แต่เมื่อฉันเข้าไปที่ส่วนของคอนโทรลเลอร์และการแชร์ข้อมูลระหว่างคอนโทรลเลอร์ฉันไม่สามารถใช้งานได้ เมื่อฉันรันด้วย Chrome ฉันได้รับข้อผิดพลาดนี้ในคอนโซล: 'อาร์กิวเมนต์' FirstCtrl 'ไม่ใช่ฟังก์ชันไม่ได้กำหนด' ฉันไม่รู้จริงๆว่ามีอะไรผิดปกติ รหัสจะเหมือนกันจากในบทช่วยสอน HTML <!DOCTYPE html> <html ng-app> <head> <title>AngularJS Tutorials: Controllers</title> <link rel="stylesheet" href="mystyle.css"> <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script> </head> <body> <div ng-app=""> <div ng-controller="FirstCtrl"> <h1> {{data.message + " world"}}</h1> <div class="{{data.message}}"> Wrap me in a foundation component </div> </div> </div> <script …

5
ng-include ตามเงื่อนไขใน angularjs
ฉันจะทำ ng-include ตามเงื่อนไขใน angularJS ได้อย่างไร เช่นฉันเพียงต้องการที่จะรวมถึงบางสิ่งบางอย่างถ้าตัวแปรมีการตั้งค่าxtrue <div ng-include="/partial.html"></div>

9
จะจัดรูปแบบวันที่โดยใช้ ng-model ได้อย่างไร?
ฉันมีอินพุตที่กำหนดเป็น <input class="datepicker" type="text" ng-model="clientForm.birthDate" /> ซึ่งถูกกำหนดให้แสดงที่อื่นในหน้า: <tr> <th>Birth Date</th> <td>{{client.birthDate|date:'mediumDate'}}</td> </tr> Dec 22, 2009เมื่อโหลดหน้าเว็บวันเดือนปีเกิดมีรูปแบบเดียวกับสิ่งที่ชอบ อย่างไรก็ตามเมื่อฉันมองเข้าไปข้างใน<input>มันจะปรากฏขึ้นตามTue Dec 22 2009 00:00:00 GMT-0800 (Pacific Standard Time)ที่ฉันเดาว่า JS แสดงผลDateวัตถุเป็นสตริงอย่างไร ประการแรกฉันจะบอกให้ Angular แสดงวันที่ในรูปแบบ<input>เป็น12/22/2009อย่างไร ดูเหมือนจะใช้|filtersในng-modelแอตทริบิวต์ไม่ได้ ประการที่สองทันทีที่ฉันแก้ไขวันที่แม้จะเก็บไว้ในรูปแบบดั้งเดิมข้อความอื่น ๆ ของฉัน (ภายใน<td>) ดูเหมือนจะไม่ใช้|dateตัวกรองอีกต่อไป จู่ๆก็เปลี่ยนรูปแบบเพื่อให้ตรงกับช่องข้อความที่ป้อน ฉันจะใช้|dateฟิลเตอร์ทุกครั้งที่มีการเปลี่ยนแปลงโมเดลได้อย่างไร คำถามที่เกี่ยวข้อง: ฉันจะสั่งให้เปิดเฉพาะ onchange ได้อย่างไร จะเข้าถึงข้อโต้แย้งในคำสั่งได้อย่างไร?
94 angularjs 

2
พารามิเตอร์รับ $ http ไม่ทำงาน
ไม่มีใครรู้ว่าทำไมถึงใช้ไม่ได้? $http .get('accept.php', { source: link, category_id: category }) .success(function (data, status) { $scope.info_show = data }); และสิ่งนี้ได้ผล: $http .get('accept.php?source=' + link + '&category_id=' + category) .success(function (data, status) { $scope.info_show = data });

1
Angular lazy การผูกครั้งเดียวสำหรับนิพจน์
AngularJS มีคุณสมบัติใหม่ตั้งแต่รุ่น 1.3.0-beta.10 ที่: "ขี้เกียจเพียงครั้งเดียวที่มีผลผูกพัน" นิพจน์ทั่วไปสามารถนำหน้าโดย::บอกให้เชิงมุมหยุดดูหลังจากที่นิพจน์ได้รับการประเมินครั้งแรก ตัวอย่างทั่วไปที่ให้ไว้มีดังนี้: <div>{{::user.name}}</div> มีไวยากรณ์ที่คล้ายกันสำหรับนิพจน์ดังต่อไปนี้หรือไม่ <div ng-if="user.isSomething && user.isSomethingElse"></div> <div ng-class="{classNameFoo: user.isSomething}"></div>

7
ใน angularjs จะเข้าถึงองค์ประกอบที่เรียกเหตุการณ์ได้อย่างไร?
ฉันใช้ทั้ง Bootstrap และ AngularJS ในเว็บแอปของฉัน ฉันมีปัญหาในการทำให้ทั้งสองคนทำงานร่วมกัน ฉันมีองค์ประกอบซึ่งมีแอตทริบิวต์ data-provide="typeahead" <input id="searchText" ng-model="searchText" type="text" class="input-medium search-query" placeholder="title" data-provide="typeahead" ng-change="updateTypeahead()" /> และฉันต้องการอัปเดตdata-sourceแอตทริบิวต์เมื่อผู้ใช้ป้อนข้อมูลในฟิลด์ ฟังก์ชันupdateTypeaheadถูกทริกเกอร์อย่างถูกต้อง แต่ฉันไม่สามารถเข้าถึงองค์ประกอบที่ทำให้เกิดเหตุการณ์ได้เว้นแต่ฉันจะใช้$('#searchText')ซึ่งเป็นวิธี jQuery ไม่ใช่วิธี AngularJS วิธีใดที่ดีที่สุดในการทำให้ AngularJS ทำงานกับโมดูล JS แบบเก่า

3
AngularJS seed: การใส่ JavaScript ลงในไฟล์แยกกัน (app.js, controllers.js, directives.js, filters.js, services.js)
ฉันใช้แม่แบบเมล็ดเชิงมุมเพื่อจัดโครงสร้างแอปพลิเคชันของฉัน เริ่มแรกฉันใส่โค้ด JavaScript ทั้งหมดลงในไฟล์เดียว, main.js. ไฟล์นี้มีการประกาศโมดูลตัวควบคุมคำสั่งตัวกรองและบริการของฉัน แอปพลิเคชันทำงานได้ดีเช่นนี้ แต่ฉันกังวลเกี่ยวกับความสามารถในการปรับขนาดและการบำรุงรักษาเนื่องจากแอปพลิเคชันของฉันมีความซับซ้อนมากขึ้น ฉันสังเกตเห็นว่าเทมเพลต angular-seed มีไฟล์แยกกันสำหรับแต่ละไฟล์ดังนั้นฉันจึงพยายามกระจายรหัสของฉันจากmain.jsไฟล์เดียวไปยังไฟล์อื่น ๆ ที่กล่าวถึงในชื่อสำหรับคำถามนี้และพบในapp/jsไดเร็กทอรีของangularแม่แบบเมล็ด คำถามของฉันคือฉันจะจัดการการอ้างอิงเพื่อให้แอปพลิเคชันทำงานได้อย่างไร เอกสารที่มีอยู่ที่พบที่นี่ไม่ชัดเจนในเรื่องนี้เนื่องจากแต่ละตัวอย่างที่ให้มาแสดงไฟล์ต้นฉบับ JavaScript ไฟล์เดียว ตัวอย่างของสิ่งที่ฉันมีคือ: app.js angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.controllers']); controllers.js angular.module('myApp.controllers', []). controller('AppCtrl', [function ($scope, $http, $filter, MyService) { $scope.myService = MyService; // found in services.js // other functions... } ]); filter.js angular.module('myApp.filters', []). filter('myFilter', [function …

1
AngularJS: ngInclude เทียบกับคำสั่ง
ฉันไม่ค่อยเข้าใจว่าควรใช้คำสั่งเมื่อใดและเมื่อใดจึงจะเหมาะสมกว่าที่จะใช้ nginclude ลองดูตัวอย่างนี้: ฉันมีบางส่วนpassword-and-confirm-input-fields.htmlนั่นคือ html สำหรับป้อนและยืนยันรหัสผ่าน ฉันใช้ทั้งในหน้าสมัครและภายใต้หน้าการเปลี่ยนแปลงรหัสผ่าน ทั้งสองเพจมีคอนโทรลเลอร์แต่ละหน้า html บางส่วนไม่มีคอนโทรลเลอร์เฉพาะ ฉันควรใช้คำสั่งหรือngIncludeเพื่อสิ่งนี้?

4
การรันโค้ดเริ่มต้น AngularJS เมื่อโหลดมุมมอง
เมื่อฉันโหลดมุมมองฉันต้องการเรียกใช้รหัสเริ่มต้นในตัวควบคุมที่เกี่ยวข้อง ในการทำเช่นนั้นฉันได้ใช้คำสั่ง ng-init กับองค์ประกอบหลักของมุมมองของฉัน: <div ng-init="init()"> blah </div> และในตัวควบคุม: $scope.init = function () { if ($routeParams.Id) { //get an existing object }); } else { //create a new object } $scope.isSaving = false; } คำถามแรก: นี่เป็นวิธีที่ถูกต้องหรือไม่? สิ่งต่อไปฉันมีปัญหากับลำดับเหตุการณ์ที่เกิดขึ้น ในมุมมองฉันมีปุ่ม 'บันทึก' ซึ่งใช้ng-disabledคำสั่งเช่นนี้: <button ng-click="save()" ng-disabled="isClean()">Save</button> isClean()ฟังก์ชั่นที่กำหนดไว้ในการควบคุม: $scope.isClean = function () { return …
93 angularjs 

6
จะข้ามคำขอไฟล่วงหน้า OPTIONS ได้อย่างไร
ฉันได้พัฒนาแอพ PhoneGap ซึ่งตอนนี้เปลี่ยนเป็นเว็บไซต์บนมือถือแล้ว ทุกอย่างทำงานได้อย่างราบรื่นนอกเหนือจากความผิดพลาดเล็ก ๆ น้อย ๆ ฉันใช้ API ของบุคคลที่สามผ่านคำขอ POST ซึ่งทำงานได้ดีในแอป แต่ล้มเหลวในเวอร์ชันเว็บไซต์บนอุปกรณ์เคลื่อนที่ หลังจากดูใกล้ ๆ ดูเหมือนว่า AngularJS (ฉันเดาว่าเบราว์เซอร์จริง) เป็นครั้งแรกที่ส่งคำขอ OPTIONS วันนี้ฉันได้เรียนรู้มากมายเกี่ยวกับ CORS แต่ดูเหมือนจะไม่รู้วิธีปิดการใช้งานทั้งหมด ฉันไม่มีสิทธิ์เข้าถึง API นั้น (ดังนั้นการเปลี่ยนแปลงที่ด้านนั้นจึงเป็นไปไม่ได้) แต่พวกเขาได้เพิ่มโดเมนที่ฉันกำลังทำงานอยู่ในส่วนหัว Access-Control-Allow-Origin นี่คือรหัสที่ฉันกำลังพูดถึง: var request = { language: 'fr', barcodes: [ { barcode: 'somebarcode', description: 'Description goes here' } ] }; } var …

17
ตรวจสอบฟิลด์หลังจากผู้ใช้ออกจากฟิลด์
ด้วย AngularJS ฉันสามารถใช้ng-pristineหรือng-dirtyตรวจสอบว่าผู้ใช้เข้ามาในฟิลด์หรือไม่ อย่างไรก็ตามฉันต้องการทำการตรวจสอบความถูกต้องฝั่งไคลเอ็นต์หลังจากที่ผู้ใช้ออกจากพื้นที่ฟิลด์แล้วเท่านั้น เนื่องจากเมื่อผู้ใช้เข้าสู่ช่องเช่นอีเมลหรือโทรศัพท์พวกเขามักจะได้รับข้อผิดพลาดเกิดขึ้นจนกว่าจะพิมพ์อีเมลฉบับเต็มเสร็จสิ้นและนี่ไม่ใช่ประสบการณ์ของผู้ใช้ที่ดีที่สุด ตัวอย่าง อัพเดท: Angular มาพร้อมกับเหตุการณ์เบลอที่กำหนดเอง: https://docs.angularjs.org/api/ng/directive/ngBlur
93 forms  angularjs 

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.