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

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

8
ความยากของ ng-model, ng-repeat และ inputs
ฉันพยายามที่จะช่วยให้ผู้ใช้สามารถแก้ไขรายชื่อของรายการโดยใช้และngRepeat ngModel( ดูซอนี้) อย่างไรก็ตามทั้งสองวิธีที่ฉันได้พยายามนำไปสู่พฤติกรรมที่แปลกประหลาด: วิธีหนึ่งไม่อัปเดตโมเดลและอีกวิธีหนึ่งจะเบลอแบบฟอร์มในแต่ละคีย์ดาวน์ ฉันทำอะไรผิดที่นี่? นี่ไม่ใช่กรณีการใช้งานที่รองรับหรือไม่? นี่คือรหัสจากซอคัดลอกเพื่อความสะดวก: <html ng-app> <head> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet"> </head> <body ng-init="names = ['Sam', 'Harry', 'Sally']"> <h1>Fun with Fields and ngModel</h1> <p>names: {{names}}</p> <h3>Binding to each element directly:</h3> <div ng-repeat="name in names"> Value: {{name}} <input ng-model="name"> </div> <p class="muted">The binding does not appear to be …

13
AngularJS - มีวิธีใดให้ $ http.post ส่งพารามิเตอร์คำขอแทน JSON?
ฉันมีรหัสเก่าที่สร้างคำขอ AJAX POST ผ่านวิธีการโพสต์ของ jQueryและมีลักษณะดังนี้: $.post("/foo/bar", requestData, function(responseData) { //do stuff with response } requestData เป็นเพียงวัตถุจาวาสคริปต์ที่มีคุณสมบัติสตริงพื้นฐานบางอย่าง ฉันกำลังดำเนินการย้ายข้อมูลของเราไปใช้ Angular และฉันต้องการแทนที่การเรียกนี้ด้วย $ http.post ฉันคิดสิ่งต่อไปนี้: $http.post("/foo/bar", requestData).success( function(responseData) { //do stuff with response } }); เมื่อฉันทำเช่นนี้ฉันได้รับการตอบสนองข้อผิดพลาด 500 จากเซิร์ฟเวอร์ เมื่อใช้ Firebug ฉันพบว่าสิ่งนี้ส่งเนื้อหาคำขอดังนี้: {"param1":"value1","param2":"value2","param3":"value3"} jQuery ที่ประสบความสำเร็จ$.postจะส่งเนื้อหาดังนี้: param1=value1&param2=value2&param3=value3 จุดสิ้นสุดที่ฉันกำลังกดปุ่มคาดว่าจะมีพารามิเตอร์คำขอไม่ใช่ JSON ดังนั้นคำถามของฉันคือต่อไปที่จะบอก$http.postให้ส่งวัตถุจาวาสคริปต์เป็นพารามิเตอร์คำขอแทน JSON หรือไม่ ใช่ฉันรู้ว่าฉันสามารถสร้างสตริงด้วยตัวเองจากออบเจ็กต์ได้ แต่ฉันอยากรู้ว่า Angular …

7
`ui-router` $ stateParams กับ $ state.params
ด้วยui-routerสามารถฉีดอย่างใดอย่างหนึ่ง$stateหรือ$stateParamsลงในคอนโทรลเลอร์เพื่อเข้าถึงพารามิเตอร์ใน URL อย่างไรก็ตามการเข้าถึงพารามิเตอร์ผ่าน$stateParamsจะเปิดเผยเฉพาะพารามิเตอร์ที่เป็นของสถานะที่จัดการโดยคอนโทรลเลอร์ที่เข้าถึงและสถานะหลักในขณะที่$state.paramsมีพารามิเตอร์ทั้งหมดรวมถึงพารามิเตอร์ในสถานะย่อยด้วย ด้วยรหัสต่อไปนี้หากเราโหลด URL โดยตรงhttp://path/1/paramA/paramBนี่คือวิธีที่จะดำเนินการเมื่อตัวควบคุมโหลด: $stateProvider.state('a', { url: 'path/:id/:anotherParam/', controller: 'ACtrl', }); $stateProvider.state('a.b', { url: '/:yetAnotherParam', controller: 'ABCtrl', }); module.controller('ACtrl', function($stateParams, $state) { $state.params; // has id, anotherParam, and yetAnotherParam $stateParams; // has id and anotherParam } module.controller('ABCtrl', function($stateParams, $state) { $state.params; // has id, anotherParam, and yetAnotherParam $stateParams; …

5
ฉันจะส่งผ่านแอตทริบิวต์หลายรายการไปยังคำสั่งแอตทริบิวต์ Angular.js ได้อย่างไร
ฉันมีคำสั่งแอตทริบิวต์ที่ จำกัด ดังนี้: restrict: "A" ฉันต้องการส่งผ่านคุณสมบัติสองอย่าง หมายเลขและฟังก์ชัน / การโทรกลับโดยเข้าถึงภายในคำสั่งโดยใช้attrsวัตถุ หากคำสั่งเป็นคำสั่งองค์ประกอบถูก จำกัด ด้วย"E"สิ่งนี้: <example-directive example-number="99" example-function="exampleCallback()"> อย่างไรก็ตามด้วยเหตุผลที่ฉันจะไม่เข้าไปฉันต้องการคำสั่งเพื่อเป็นคำสั่งแอตทริบิวต์ ฉันจะส่งคุณสมบัติหลายรายการไปยังคำสั่งแอตทริบิวต์ได้อย่างไร

5
วิธีจัดการการดาวน์โหลดไฟล์ด้วยการรับรองความถูกต้องโดยใช้ JWT
ฉันกำลังเขียนเว็บแอปใน Angular ที่มีการจัดการการตรวจสอบความถูกต้องโดยโทเค็น JWT ซึ่งหมายความว่าทุกคำขอจะมีส่วนหัว "การตรวจสอบสิทธิ์" พร้อมข้อมูลที่จำเป็นทั้งหมด ใช้งานได้ดีสำหรับการโทร REST แต่ฉันไม่เข้าใจว่าฉันควรจัดการลิงก์ดาวน์โหลดสำหรับไฟล์ที่โฮสต์บนแบ็กเอนด์อย่างไร (ไฟล์อยู่บนเซิร์ฟเวอร์เดียวกันกับที่โฮสต์บริการเว็บ) ฉันไม่สามารถใช้<a href='...'/>ลิงก์ปกติได้เนื่องจากไม่มีส่วนหัวใด ๆ และการตรวจสอบความถูกต้องจะล้มเหลว window.open(...)เหมือนกันสำหรับคาถาต่างๆของ วิธีแก้ปัญหาบางอย่างที่ฉันนึกถึง: สร้างลิงค์ดาวน์โหลดชั่วคราวที่ไม่ปลอดภัยบนเซิร์ฟเวอร์ ส่งผ่านข้อมูลการพิสูจน์ตัวตนเป็นพารามิเตอร์ url และจัดการเคสด้วยตนเอง รับข้อมูลผ่าน XHR และบันทึกไฟล์ฝั่งไคลเอ็นต์ ทั้งหมดที่กล่าวมาน้อยกว่าที่น่าพอใจ 1 เป็นวิธีแก้ปัญหาที่ฉันใช้อยู่ตอนนี้ ฉันไม่ชอบด้วยเหตุผลสองประการประการแรกมันไม่เหมาะกับการรักษาความปลอดภัยอย่างที่สองมันใช้งานได้ แต่ต้องใช้งานค่อนข้างมากโดยเฉพาะบนเซิร์ฟเวอร์: เพื่อดาวน์โหลดสิ่งที่ฉันต้องเรียกใช้บริการที่สร้าง "สุ่ม" ใหม่ "url เก็บไว้ที่ใดที่หนึ่ง (อาจอยู่ในฐานข้อมูล) สักระยะหนึ่งแล้วส่งคืนให้กับลูกค้า ไคลเอนต์ได้รับ url และใช้ window.open หรือคล้ายกับมัน เมื่อได้รับการร้องขอ url ใหม่ควรตรวจสอบว่ายังถูกต้องหรือไม่จากนั้นจึงส่งคืนข้อมูล 2 ดูเหมือนว่าอย่างน้อยก็ทำงานได้มาก 3 ดูเหมือนจะใช้งานได้มากแม้กระทั่งการใช้ไลบรารีที่มีอยู่และปัญหาที่อาจเกิดขึ้นมากมาย (ฉันจะต้องให้แถบสถานะการดาวน์โหลดของฉันเองโหลดทั้งไฟล์ในหน่วยความจำแล้วขอให้ผู้ใช้บันทึกไฟล์ในเครื่อง) แม้ว่างานนี้จะค่อนข้างธรรมดาดังนั้นฉันจึงสงสัยว่ามีอะไรที่ง่ายกว่านี้ที่ฉันสามารถใช้ได้หรือไม่ …

6
ฉันจะเรียกใช้คำสั่งหลังจากที่ Dom เสร็จสิ้นการแสดงผลได้อย่างไร
ฉันมีปัญหาที่ดูเหมือนง่ายและไม่ชัดเจน(โดยการอ่านโซลูชันAngular JS docs) ฉันมีคำสั่ง Angular JS ที่ทำการคำนวณบางอย่างตามความสูงขององค์ประกอบ DOM อื่น ๆ เพื่อกำหนดความสูงของคอนเทนเนอร์ใน DOM สิ่งที่คล้ายกับสิ่งนี้เกิดขึ้นภายในคำสั่ง: return function(scope, element, attrs) { $('.main').height( $('.site-header').height() - $('.site-footer').height() ); } ปัญหาคือเมื่อคำสั่งทำงาน$('site-header')ไม่พบส่งคืนอาร์เรย์ว่างแทนที่จะเป็นองค์ประกอบ DOM ที่ห่อหุ้ม jQuery ที่ฉันต้องการ มีการเรียกกลับที่ฉันสามารถใช้ภายในคำสั่งของฉันซึ่งทำงานหลังจากโหลด DOM แล้วเท่านั้นและฉันสามารถเข้าถึงองค์ประกอบ DOM อื่น ๆ ผ่านแบบสอบถามสไตล์ตัวเลือก jQuery ปกติได้หรือไม่

7
AngularJS แนวทางปฏิบัติที่ดีที่สุดสำหรับการประกาศโมดูล?
ฉันมีโมดูล Angular จำนวนมากที่ประกาศในแอปของฉัน เดิมทีฉันเริ่มประกาศโดยใช้ไวยากรณ์ "ล่ามโซ่" ดังนี้: angular.module('mymodule', []) .controller('myctrl', ['dep1', function(dep1){ ... }]) .service('myservice', ['dep2', function(dep2){ ... }]) ... // more here แต่ฉันตัดสินใจว่ามันไม่ง่ายที่จะอ่านดังนั้นฉันจึงเริ่มประกาศโดยใช้ตัวแปรโมดูลเช่นนี้: var mod = angular.module('mymodule', []); mod.controller('myctrl', ['dep1', function(dep1){ ... }]); mod.service('myservice', ['dep2', function(dep2){ ... }]); ... ไวยากรณ์ที่สองดูเหมือนจะอ่านได้ง่ายกว่าสำหรับฉัน แต่ข้อร้องเรียนเดียวของฉันคือไวยากรณ์นี้ทำให้modตัวแปรอยู่ในขอบเขตทั่วโลก ถ้าฉันเคยมีชื่อตัวแปรอื่นmodมันจะถูกแทนที่ด้วยตัวแปรถัดไป (และปัญหาอื่น ๆ ที่เกี่ยวข้องกับตัวแปรส่วนกลาง) คำถามของฉันคือวิธีนี้เป็นวิธีที่ดีที่สุดหรือไม่? หรือจะดีกว่าถ้าทำแบบนี้: (function(){ var mod …
115 angularjs 

6
จะทำให้เหตุการณ์ ng-click มีเงื่อนไขได้อย่างไร?
ฉันมีรหัสนี้ใน ng-repeat: <a href="#" class="disabled" ng-click="doSomething(object)">Do something</a> วิธีสร้างเงื่อนไขว่าปุ่มถูกปิดใช้งานเมื่อมีclass="disabled"? หรือมีวิธีทำใน Javascript เพื่อให้มีลักษณะดังนี้: $('.do-something-button').click(function(){ if (!$(this).hasClass('disabled')) { do something } });

7
AngularJS - $ anchorScroll เรียบ / ระยะเวลา
การอ่านเอกสาร AngularJSฉันไม่ทราบว่า$anchorScrollสามารถมีตัวเลือกระยะเวลา / การค่อยๆเปลี่ยนเพื่อเลื่อนดูองค์ประกอบได้อย่างราบรื่นหรือไม่ มันบอกเพียงว่า: $location.hash('bottom'); // call $anchorScroll() $anchorScroll(); ฉันไม่ได้ใช้ jquery และไม่ต้องการ; ยังมีวิธีที่ชาญฉลาด แต่ง่าย ๆ ในการสร้างหรือขยาย$anchorScrollเพื่อให้การเลื่อนราบรื่นขึ้นหรือไม่?

6
การแก้คำสัญญาหลาย ๆ ครั้งปลอดภัยหรือไม่?
ฉันมีบริการ i18n ในแอปพลิเคชันของฉันซึ่งมีรหัสต่อไปนี้: var i18nService = function() { this.ensureLocaleIsLoaded = function() { if( !this.existingPromise ) { this.existingPromise = $q.defer(); var deferred = this.existingPromise; var userLanguage = $( "body" ).data( "language" ); this.userLanguage = userLanguage; console.log( "Loading locale '" + userLanguage + "' from server..." ); $http( { method:"get", url:"/i18n/" + …

7
ใน Angular ฉันต้องการค้นหาวัตถุในอาร์เรย์
ใน Angular ฉันมีขอบเขตวัตถุที่ส่งคืนวัตถุจำนวนมาก แต่ละคนมี ID (สิ่งนี้ถูกเก็บไว้ในไฟล์แบบแบนดังนั้นจึงไม่มี DB และดูเหมือนว่าฉันจะใช้ไม่ได้ng-resource) ในตัวควบคุมของฉัน: $scope.fish = [ {category:'freshwater', id:'1', name: 'trout', more:'false'}, {category:'freshwater', id:'2', name:'bass', more:'false'} ]; ในมุมมองของฉันฉันมีข้อมูลเพิ่มเติมเกี่ยวกับปลาที่ซ่อนอยู่โดยค่าเริ่มต้นที่มีng-showมากขึ้น showdetails(fish.fish_id)แต่เมื่อฉันคลิกแท็บการแสดงที่เรียบง่ายมากขึ้นผมอยากจะเรียกใช้ฟังก์ชัน ฟังก์ชันของฉันจะมีลักษณะดังนี้: $scope.showdetails = function(fish_id) { var fish = $scope.fish.get({id: fish_id}); fish.more = true; } ตอนนี้ในมุมมองรายละเอียดเพิ่มเติมจะปรากฏขึ้น อย่างไรก็ตามหลังจากค้นหาในเอกสารแล้วฉันไม่สามารถหาวิธีค้นหาfishอาร์เรย์นั้นได้ ดังนั้นฉันจะสอบถามอาร์เรย์ได้อย่างไร และในคอนโซลฉันจะเรียกดีบักเกอร์เพื่อให้ฉันมี$scopeวัตถุที่จะเล่นได้อย่างไร

12
กำลังส่งเหตุการณ์เมื่อ AngularJS โหลดเสร็จ
สงสัยว่าอะไรคือวิธีที่ดีที่สุดในการตรวจจับการสิ้นสุดของการโหลดหน้า / การบูตสตราปเมื่อคำสั่งทั้งหมดเสร็จสิ้นการรวบรวม / เชื่อมโยง มีเหตุการณ์ใดแล้ว? ฉันควรใช้ฟังก์ชัน bootstrap มากเกินไปหรือไม่

10
รับค่าเมื่อเลือก ng-option เปลี่ยนแปลง
ฉันมีรายการแบบเลื่อนลงในหน้า. html ของฉัน หล่นลง: <select ng-model="blisterPackTemplateSelected" data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates"> <option value="">Select Account</option> </select> ฉันต้องการดำเนินการเมื่อผู้ใช้เลือกค่า ดังนั้นในคอนโทรลเลอร์ของฉันฉันทำ: ควบคุม: $scope.$watch('blisterPackTemplateSelected', function() { alert('changed'); console.log($scope.blisterPackTemplateSelected); }); แต่การเปลี่ยนแปลงค่าในรายการแบบเลื่อนลงไม่ได้เรียกใช้รหัส: $scope.$watch('blisterPackTemplateSelected', function() ด้วยเหตุนี้ฉันจึงลองใช้วิธีอื่นโดยใช้ a: ng_change = 'changedValue()'บนแท็กเลือก และ ฟังก์ชั่น: $scope.changedValue = function() { console.log($scope.blisterPackTemplateSelected); } แต่blisterPackTemplateSelectedจะถูกเก็บไว้ในขอบเขตลูก ฉันอ่านว่าผู้ปกครองไม่สามารถเข้าถึงขอบเขตย่อยได้ อะไรคือวิธีที่ถูกต้อง / ดีที่สุดในการดำเนินการบางอย่างเมื่อค่าที่เลือกในรายการแบบเลื่อนลงเปลี่ยนไป ถ้าเป็นวิธีที่ 1 ฉันทำอะไรผิดกับรหัสของฉัน?

3
จะโหลด json ลงใน angular.js ng-model ได้อย่างไร?
ฉันมีสิ่งที่ฉันคิดว่าน่าจะเป็นคำถามที่ชัดเจนมาก แต่ฉันหาคำตอบไม่ได้เลย ฉันแค่พยายามโหลดข้อมูล JSON จากเซิร์ฟเวอร์ของฉันไปยังไคลเอนต์ ตอนนี้ฉันใช้ JQuery เพื่อโหลดด้วยการโทร AJAX (รหัสด้านล่าง) <script type="text/javascript"> var global = new Array(); $.ajax({ url: "/json", success: function(reports){ global = reports; return global; } }); </script> ซึ่งอยู่ในไฟล์ html ตอนนี้ใช้งานได้ แต่ปัญหาคือฉันต้องการใช้ AngularJS ตอนนี้ในขณะที่ Angular CAN ใช้ตัวแปรฉันไม่สามารถโหลดทุกอย่างเป็นตัวแปรได้ดังนั้นฉันจึงสามารถใช้ a สำหรับแต่ละลูปได้ ดูเหมือนว่าจะเกี่ยวข้องกับ "$ Scope" ซึ่งมักจะอยู่ในไฟล์. js ปัญหาคือฉันไม่สามารถโหลดโค้ดจากหน้าอื่นเป็นไฟล์. js ทุกตัวอย่างของ Angular …

7
การใส่ล้อเลียนลงในบริการ AngularJS
ฉันมีบริการ AngularJS ที่เขียนไว้และฉันต้องการทดสอบหน่วย angular.module('myServiceProvider', ['fooServiceProvider', 'barServiceProvider']). factory('myService', function ($http, fooService, barService) { this.something = function() { // Do something with the injected services }; return this; }); ไฟล์ app.js ของฉันได้ลงทะเบียนสิ่งเหล่านี้: angular .module('myApp', ['fooServiceProvider','barServiceProvider','myServiceProvider'] ) ฉันสามารถทดสอบว่า DI ทำงานได้ดังนี้: describe("Using the DI framework", function() { beforeEach(module('fooServiceProvider')); beforeEach(module('barServiceProvider')); beforeEach(module('myServiceProvder')); var service; beforeEach(inject(function(fooService, barService, …

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