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

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

5
โครงสร้างโฟลเดอร์ AngularJS [ปิด]
ปิด คำถามนี้เป็นคำถามความคิดเห็นตาม ไม่ยอมรับคำตอบในขณะนี้ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้สามารถตอบข้อเท็จจริงและการอ้างอิงได้โดยแก้ไขโพสต์นี้ ปิดให้บริการใน6 ปีที่ผ่านมา ปรับปรุงคำถามนี้ คุณจัดวางโครงสร้างโฟลเดอร์สำหรับแอปพลิเคชัน AngularJS ขนาดใหญ่และปรับขนาดได้อย่างไร
186 angularjs 

30
ข้อผิดพลาดในไม่พบโมดูล 'node-sass'
การกำหนดค่า: macOS High Sierra, รุ่น 10.13.2, โหนด: v8.1.2 npm: 5.0.3 เมื่อฉันรัน npm เริ่มต้นในโครงการ angularjs ของฉันฉันได้รับข้อผิดพลาดนี้: ERROR in Cannot find module 'node-sass' หลังจากนี้ฉันทำงาน: npm i node-sass ตอนนี้ฉันได้รับข้อผิดพลาดนี้: gyp: No Xcode or CLT version detected! gyp ERR! configure error gyp ERR! stack Error: `gyp` failed with exit code: 1 ทำไมไม่ติดตั้ง npm ติดตั้งปม …

5
ฉันจะละเว้นการโหลดเริ่มต้นเมื่อดูการเปลี่ยนแปลงโมเดลใน AngularJS ได้อย่างไร
ฉันมีหน้าเว็บที่ทำหน้าที่เป็นตัวแก้ไขสำหรับเอนทิตีเดียวซึ่งอยู่ในรูปกราฟลึกในคุณสมบัติ $ scope.fieldcontainer หลังจากที่ฉันได้รับการตอบกลับจาก REST API ของฉัน (ผ่าน $ resource) ฉันเพิ่มนาฬิกาใน 'fieldcontainer' ฉันใช้นาฬิกาเรือนนี้เพื่อตรวจสอบว่าหน้า / เอนทิตีเป็น "สกปรก" ตอนนี้ฉันกำลังทำให้ปุ่มบันทึกเด้ง แต่จริง ๆ แล้วฉันต้องการทำให้ปุ่มบันทึกไม่ปรากฏจนกว่าผู้ใช้จะทำให้รูปแบบสกปรก สิ่งที่ฉันได้รับคือสิ่งกระตุ้นหนึ่งของนาฬิกาซึ่งฉันคิดว่าจะเกิดขึ้นเพราะ. fieldcontainer = ... การมอบหมายจะเกิดขึ้นทันทีหลังจากที่ฉันสร้างนาฬิกาขึ้นมา ฉันกำลังคิดว่าจะใช้คุณสมบัติ "dirtyCount" เพื่อรับสัญญาณเตือนที่ผิดพลาดครั้งแรก แต่รู้สึกว่าแฮ็คมาก ... และฉันคิดว่าต้องมีวิธี "เชิงมุม" เพื่อจัดการกับสิ่งนี้ - ฉันไม่ใช่คนเดียว ใช้นาฬิกาเพื่อตรวจจับแบบจำลองที่สกปรก นี่คือรหัสที่ฉันตั้งนาฬิกาของฉัน: $scope.fieldcontainer = Message.get({id: $scope.entityId }, function(message,headers) { $scope.$watch('fieldcontainer', function() { console.log("model is dirty."); …

12
AngularJS: วิธีรันโค้ดเพิ่มเติมหลังจาก AngularJS แสดงผลเทมเพลตแล้ว?
ฉันมีเทมเพลต Angular ใน DOM เมื่อคอนโทรลเลอร์ของฉันได้รับข้อมูลใหม่จากบริการมันจะอัพเดตโมเดลในขอบเขต $ และแสดงเทมเพลตอีกครั้ง ดีมากจนถึงตอนนี้ ปัญหาคือฉันต้องทำงานพิเศษหลังจากเทมเพลตถูกแสดงอีกครั้งและอยู่ใน DOM (ในกรณีนี้คือปลั๊กอิน jQuery) ดูเหมือนว่าจะมีเหตุการณ์ที่ต้องฟังเช่น AfterRender แต่ฉันไม่พบสิ่งใดเลย บางทีคำสั่งอาจเป็นหนทางไป แต่ดูเหมือนว่าจะยิงเร็วเกินไป นี่คือ jsFiddle ที่สรุปปัญหาของฉัน: Fiddle-AngularIssue == UPDATE == จากความคิดเห็นที่เป็นประโยชน์ฉันจึงเปลี่ยนไปใช้คำสั่งเพื่อจัดการการจัดการ DOM และใช้โมเดล $ watch ในคำสั่ง อย่างไรก็ตามฉันยังคงมีปัญหาพื้นฐานเดียวกันอยู่ โค้ดที่อยู่ในเหตุการณ์การเฝ้าดู $ เริ่มก่อนที่จะรวบรวมและแทรกเทมเพลตใน DOM ดังนั้นปลั๊กอิน jquery จะประเมินตารางที่ว่างอยู่เสมอ ที่น่าสนใจถ้าฉันลบการเรียกแบบ async สิ่งที่ใช้งานได้ดีก็เป็นขั้นตอนในทิศทางที่ถูกต้อง นี่คือ Fiddle ที่อัปเดตของฉันเพื่อสะท้อนการเปลี่ยนแปลงเหล่านี้: http://jsfiddle.net/uNREn/12/

4
การสูญเสียขอบเขตเมื่อใช้ ng-include
ฉันมีเส้นทางโมดูลนี้: var mainModule = angular.module('lpConnect', []). config(['$routeProvider', function ($routeProvider) { $routeProvider. when('/home', {template:'views/home.html', controller:HomeCtrl}). when('/admin', {template:'views/admin.html', controller:AdminCtrl}). otherwise({redirectTo:'/connect'}); }]); โฮม HTML: <div ng-include src="views.partial1"></div> partial1 HTML: <form ng-submit="addLine()"> <input type="text" ng-model="lineText" size="30" placeholder="Type your message here"> </form> HomeCtrl: function HomeCtrl($scope, $location, $window, $http, Common) { ... $scope.views = { partial1:"views/partial1.html" …

5
คำสั่ง AngularJS คืออะไร
ฉันใช้เวลาอ่านเอกสาร AngularJS และแบบฝึกหัดหลายครั้งค่อนข้างมากและฉันรู้สึกประหลาดใจมากที่เอกสารไม่สามารถเข้าถึงได้ ฉันมีคำถามง่ายๆที่ตอบได้ซึ่งอาจเป็นประโยชน์กับผู้อื่นที่ต้องการซื้อ AngularJS: คำสั่ง AngularJS คืออะไร ควรมีคำจำกัดความที่เรียบง่ายและแม่นยำของคำสั่งบางแห่ง แต่เว็บไซต์ AngularJSเสนอคำจำกัดความที่ไร้ประโยชน์เหล่านี้: ในหน้าแรก : คำสั่งเป็นคุณสมบัติพิเศษและมีประสิทธิภาพที่มีอยู่ใน AngularJS คำสั่งให้คุณสร้างไวยากรณ์ HTML ใหม่เฉพาะสำหรับแอปพลิเคชันของคุณ ในเอกสารสำหรับนักพัฒนา : คำสั่งเป็นวิธีสอน HTML แบบใหม่ ระหว่างการคอมไพล์คำสั่ง DOM จะจับคู่กับ HTML และดำเนินการ สิ่งนี้อนุญาตให้คำสั่งในการลงทะเบียนพฤติกรรมหรือเปลี่ยน DOM และมีการพูดคุยกันหลายครั้งเกี่ยวกับคำสั่งซึ่งดูเหมือนว่าจะถือว่าผู้ชมเข้าใจสิ่งที่พวกเขาเป็น ทุกคนจะสามารถนำเสนอสำหรับการอ้างอิงที่ชัดเจนคำจำกัดความที่แม่นยำของสิ่งที่เป็นคำสั่งที่อธิบาย: มันคืออะไร (ดูคำจำกัดความที่ชัดเจนของ jQueryเป็นตัวอย่าง) ปัญหาและสถานการณ์ในทางปฏิบัติที่ควรนำมากล่าวถึงคืออะไร รูปแบบการออกแบบใดที่บ่งบอกถึงหรือว่ามันเหมาะสมกับภารกิจMVC / MVW ที่อ้างว่าเป็นของ AngularJS

1
การเลือก bootstrap กับการออกแบบวัสดุ [ปิด]
ปิด. คำถามนี้ไม่เป็นไปตามหลักเกณฑ์กองมากเกิน ไม่ยอมรับคำตอบในขณะนี้ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เป็นไปตามหัวข้อสำหรับ Stack Overflow ปิดให้บริการใน5 ปีที่ผ่านมา ปรับปรุงคำถามนี้ ฉันจะเริ่มโครงการใหม่โดยใช้ AngularJS (กองซ้อนเต็ม) โครงการของฉันจะต้องตอบสนองและฉันจะสร้างแม่แบบตั้งแต่เริ่มต้น ดังนั้นฉันต้องการคำแนะนำว่าจะเลือก bootstrap 3 (มีคำสั่งเชิงมุม) หรือการออกแบบวัสดุสำหรับเค้าโครงหรือไม่ ฉันจะซาบซึ้งอย่างมากถ้ามีคนสามารถระบุข้อดีข้อเสียของทั้งคู่

9
เป็นวิธีที่ดีที่สุดในการยกเลิกการเผยแพร่กิจกรรมระหว่างการโทร ng-click ซ้อนอยู่?
นี่คือตัวอย่าง สมมติว่าฉันต้องการให้มีภาพซ้อนทับเหมือนเว็บไซต์จำนวนมาก ดังนั้นเมื่อคุณคลิกภาพขนาดย่อจะมีการซ้อนทับสีดำปรากฏขึ้นเหนือหน้าต่างทั้งหมดของคุณและภาพที่มีขนาดใหญ่กว่าจะอยู่กึ่งกลาง การคลิกการซ้อนทับสีดำจะเป็นการยกเลิก การคลิกที่ภาพจะเรียกใช้ฟังก์ชันที่แสดงภาพถัดไป html ที่: <div ng-controller="OverlayCtrl" class="overlay" ng-click="hideOverlay()"> <img src="http://some_src" ng-click="nextImage()"/> </div> จาวาสคริปต์: function OverlayCtrl($scope) { $scope.hideOverlay = function() { // Some code to hdie the overlay } $scope.nextImage = function() { // Some code to find and display the next image } } ปัญหาคือว่าด้วยการตั้งค่านี้หากคุณคลิกที่ภาพทั้งสองnextImage()และhideOverlay()ถูกเรียกว่า แต่สิ่งที่ฉันต้องการมีไว้สำหรับnextImage()เรียกเท่านั้น ฉันรู้ว่าคุณสามารถจับภาพและยกเลิกเหตุการณ์ในnextImage()ฟังก์ชั่นเช่นนี้: …
180 angularjs 

3
อะไรคือข้อแตกต่างระหว่าง $ parse, $ interpolate และ $ compile services?
ความแตกต่างระหว่างคืออะไร$parse, $interpolateและ$compileบริการ? สำหรับฉันพวกเขาทั้งหมดทำสิ่งเดียวกัน: นำเทมเพลตและรวบรวมไปยังเทมเพลต - ฟังก์ชั่น

7
โทร AngularJS จากรหัสเดิม
ฉันใช้ AngularJS เพื่อสร้างตัวควบคุม HTML ที่โต้ตอบกับแอปพลิเคชัน Flex แบบดั้งเดิม การเรียกกลับทั้งหมดจากแอพ Flex ต้องเชื่อมต่อกับหน้าต่าง DOM ตัวอย่าง (ใน AS3) ExternalInterface.call("save", data); จะโทร window.save = function(data){ // want to update a service // or dispatch an event here... } จากภายในฟังก์ชั่นปรับขนาด JS ฉันต้องการส่งเหตุการณ์ที่คอนโทรลเลอร์สามารถได้ยินได้ ดูเหมือนว่าการสร้างบริการเป็นวิธีที่จะไป คุณสามารถอัพเดทบริการจากด้านนอกของ AngularJS ได้หรือไม่? คอนโทรลเลอร์สามารถฟังเหตุการณ์จากบริการได้หรือไม่? ในการทดสอบหนึ่งครั้ง (คลิกเพื่อเล่นซอ)ฉันทำเหมือนว่าฉันสามารถเข้าถึงบริการได้ แต่การอัปเดตข้อมูลของบริการไม่ได้รับผลกระทบในมุมมอง (ในตัวอย่างที่<option>ควรเพิ่มใน<select>) ขอบคุณ!

13
AngularJS ng-app หลายอันภายในหนึ่งหน้า
ฉันเพิ่งเริ่มเรียนรู้ Angular JS และสร้างตัวอย่างพื้นฐานบางอย่าง แต่ฉันติดอยู่กับปัญหาต่อไปนี้ ฉันได้สร้าง 2 โมดูลและ 2 ตัวควบคุม shoppingCart -> ShoppingCartController namesList -> NamesController มีมุมมองที่เกี่ยวข้องสำหรับแต่ละคอนโทรลเลอร์ มุมมองแรกแสดงผลได้ดี แต่อันดับที่สองไม่แสดงผล ไม่มีข้อผิดพลาด http://jsfiddle.net/ep2sQ/ โปรดช่วยฉันแก้ปัญหานี้ นอกจากนี้ยังมีความเป็นไปได้ที่จะเพิ่มคอนโซลในมุมมองเพื่อตรวจสอบว่าค่าใดถูกส่งผ่านจากตัวควบคุม เช่นใน div ต่อไปนี้เราสามารถเพิ่ม console.log และส่งออกค่าควบคุม <div ng-app="shoppingCart" ng-controller="ShoppingCartController"> </div>
180 angularjs 


2
ความแตกต่างระหว่าง $ evalAsync และ $ timeout ใน AngularJS คืออะไร
ฉันใช้ AngularJS มาระยะหนึ่งแล้วและพบว่าจำเป็นต้องใช้$ timeoutทุกครั้ง (ดูเหมือนจะเป็นปลั๊กอิน jQuery) เมื่อเร็ว ๆ นี้ฉันพยายามทำความเข้าใจวงจรการแยกย่อยที่ดีขึ้นและลึกซึ้งขึ้นและฉันได้พบกับฟังก์ชัน$ evalAsync ดูเหมือนว่าฟังก์ชั่นดังกล่าวจะให้ผลลัพธ์ที่คล้ายกัน$timeoutเพียงคุณเท่านั้นที่ไม่ได้ทำให้มันล่าช้า ทุกครั้งที่ฉันใช้$timeoutมันจะมีการหน่วงเวลาเป็น 0 ดังนั้นตอนนี้ฉันสงสัยว่าควรใช้$evalAsyncแทนหรือไม่ มีความแตกต่างพื้นฐานระหว่างสองหรือไม่ กรณีใดบ้างที่คุณจะใช้อีกแบบหนึ่ง ฉันต้องการรับความรู้สึกที่ดีขึ้นเมื่อใช้อันใด

6
เทมเพลต Angularjs ค่าเริ่มต้นหากการเชื่อมโยง Null / ไม่ได้กำหนด (พร้อมตัวกรอง)
ฉันมีการโยงเทมเพลตที่แสดงคุณลักษณะของโมเดลที่เรียกว่า 'date' ซึ่งเป็นวันที่โดยใช้ตัวกรองวันที่ของ Angular <span class="gallery-date">{{gallery.date | date:'mediumDate'}}</span> จนถึงตอนนี้ดีมาก อย่างไรก็ตามในขณะนี้หากไม่มีค่าในฟิลด์วันที่การรวมจะไม่แสดงผลใด ๆ อย่างไรก็ตามฉันต้องการให้แสดงสตริง 'ต่าง ๆ ' หากไม่มีวันที่ ฉันสามารถรับตรรกะพื้นฐานโดยใช้ตัวดำเนินการแบบไบนารี: <span class="gallery-date">{{gallery.date || 'Various'}}</span> อย่างไรก็ตามฉันไม่สามารถใช้งานกับตัวกรองวันที่ได้: <span class="gallery-date">{{gallery.date | date:'mediumDate' || "Various"}}</span> ฉันจะใช้ตัวดำเนินการไบนารีข้างตัวกรองวันที่ได้อย่างไร

9
การใช้เครื่องหมายจุลภาคเป็นตัวคั่นรายการกับ AngularJS
ฉันต้องการสร้างรายการที่คั่นด้วยเครื่องหมายจุลภาค: <li ng-repeat="friend in friends"> <b ng-repeat="email in friend.email">{{email}}{{$last ? '' : ', '}}</b>... </li> ตามเอกสารของ AngularJS ไม่อนุญาตให้ใช้คำสั่งการควบคุมการไหลในนิพจน์ นี่คือเหตุผลที่ฉัน{{$last ? '' : ', '}}ไม่ทำงาน มีวิธีอื่นในการสร้างรายการที่คั่นด้วยเครื่องหมายจุลภาคหรือไม่ แก้ไข 1 มีสิ่งที่ง่ายกว่า: <span ng-show="!$last">, </span>

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