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

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

2
ngModel ฟอร์แมตและตัวแยกวิเคราะห์
ฉันโพสต์คำถามเดียวกันในรูปแบบอื่น แต่ไม่มีใครตอบ ฉันไม่ได้รับภาพที่ชัดเจนว่า Formatters และ Parsers ทำอะไรใน angular js ตามคำจำกัดความทั้ง Formatters และ Parsers มีลักษณะคล้ายกับฉัน บางทีฉันอาจจะผิดเพราะฉันยังใหม่กับ angularjs นี้ นิยามฟอร์แมต อาร์เรย์ของฟังก์ชันที่จะดำเนินการเป็นไปป์ไลน์เมื่อใดก็ตามที่ค่าโมเดลเปลี่ยนแปลง แต่ละฟังก์ชันถูกเรียกใช้ในทางกลับกันส่งค่าผ่านไปยังฟังก์ชันถัดไป ใช้เพื่อจัดรูปแบบ / แปลงค่าเพื่อแสดงในการควบคุมและการตรวจสอบความถูกต้อง นิยามตัววิเคราะห์ อาร์เรย์ของฟังก์ชันที่จะดำเนินการเป็นไปป์ไลน์เมื่อใดก็ตามที่คอนโทรลอ่านค่าจาก DOM แต่ละฟังก์ชันถูกเรียกใช้ในทางกลับกันส่งค่าผ่านไปยังฟังก์ชันถัดไป ใช้ในการฆ่าเชื้อ / แปลงค่าตลอดจนการตรวจสอบความถูกต้อง สำหรับการตรวจสอบความถูกต้องตัววิเคราะห์ควรอัพเดตสถานะความถูกต้องโดยใช้ $ setValidity () และส่งคืนค่าที่ไม่ถูกต้องสำหรับค่าที่ไม่ถูกต้อง โปรดช่วยให้ฉันเข้าใจคุณลักษณะทั้งสองด้วยตัวอย่างง่ายๆ เราจะชื่นชมตัวอย่างง่าย ๆ ของทั้งสองอย่าง
3
ตำแหน่งของคำสั่ง ng-app (html vs body)
ฉันเพิ่งตรวจสอบโค้ดสำหรับเว็บแอปที่สร้างด้วยเชิงมุมและพบว่ามีการเขียนโค้ดโดยng-app="myModule"วางคำสั่งไว้บน<body>แท็ก เมื่อเรียนรู้เชิงมุมฉันเท่านั้นที่เคยเห็นมันใช้กับ<html>แท็กตามคำแนะนำของเอกสารเชิงมุมที่นี่ , ที่นี่และในของพวกเขากวดวิชา ผมได้สำรวจนี้บิตของตัวเองและพบว่า SO คำถามสะดุดตานี้และในทำนองเดียวกันนี้ที่หารือเกี่ยวกับการโหลดโมดูลหลายหน้า อย่างไรก็ตามเทคนิคนี้แตกต่างจากกรณีของฉันเนื่องจากเกี่ยวข้องกับการวาง ng-app บนองค์ประกอบภายในร่างกายและใช้การบูตด้วยตนเองเพื่อเรียกใช้แอปเชิงมุมสองแอปในเวลาเดียวกัน เท่าที่ฉันสามารถบอกได้ไม่มีความแตกต่างระหว่างรันไทม์ระหว่างแอพที่ng-appเปิด<html>หรือ<body>. ตามที่ฉันเข้าใจมันng-appกำหนดรูทของแอปพลิเคชันเชิงมุมดังนั้นการจัดวางบนส่วนบน<body>จะตัด<head>ออกจากขอบเขตของเชิงมุม แต่ฉันคิดไม่ออกว่าจะมีผลกระทบต่อสิ่งต่าง ๆ อย่างไร คำถามของฉันคืออะไรคือความแตกต่างทางเทคนิคระหว่างการวางng-appบนแท็กเหล่านี้แทนที่จะเป็นอีกแท็ก
103 angularjs 
2
AngularJS: ตรวจจับการเปลี่ยนแปลงในโมเดลโดยอัตโนมัติ
สมมติว่าฉันต้องการทำบางอย่างเช่นเรียกใช้โค้ดโดยอัตโนมัติ (เช่นการบันทึกข้อมูลลงในเซิร์ฟเวอร์) เมื่อใดก็ตามที่ค่าของโมเดลเปลี่ยนแปลง เป็นวิธีเดียวที่จะทำได้โดยการตั้งค่าบางอย่างเช่นng-changeในแต่ละคอนโทรลที่อาจเปลี่ยนโมเดลได้หรือไม่? กล่าวคือด้วยมุมมองสิ่งต่างๆจะเปลี่ยนไปทันทีเมื่อโมเดลมีการเปลี่ยนแปลงโดยไม่ต้องเชื่อมโยงอะไรอย่างชัดเจน มีอะนาล็อกที่สามารถรันโค้ดที่บันทึกไปยังเซิร์ฟเวอร์ได้หรือไม่? สิ่งที่ต้องการ myModel.on('change', function() { $.post("/my-url", ...); }); อย่างที่คุณอาจเห็นเช่นกระดูกสันหลัง
7
Angularjs ลดแนวทางปฏิบัติที่ดีที่สุด
ฉันกำลังอ่าน http://www.alexrothenberg.com/2013/02/11/the-magic-behind-angularjs-dependency-injection.htmlและปรากฎว่า angularjs dependency injection มีปัญหาถ้าคุณลดขนาดจาวาสคริปต์ของคุณดังนั้นฉัน ฉันสงสัยว่าแทนที่จะเป็น var MyController = function($scope, $http) { $http.get('https://api.github.com/repos/angular/angular.js/commits') .then(function(response) { $scope.commits = response.data }) } คุณควรใช้ var MyController = ['$scope', '$http', function($scope, $http) { $http.get('https://api.github.com/repos/angular/angular.js/commits') .then(function(response) { $scope.commits = response.data }) }] โดยรวมแล้วฉันคิดว่าตัวอย่างที่สองนั้นมีไว้สำหรับ angularjs เวอร์ชันเก่า แต่ ... ฉันควรใช้วิธีฉีด (วิธีที่สอง) เสมอหรือไม่?
7
คอนโทรลเลอร์หลายตัวพร้อม AngularJS ในแอพหน้าเดียว
ฉันต้องการทราบวิธีการใช้คอนโทรลเลอร์หลายตัวสำหรับแอปพลิเคชันหน้าเดียว ฉันพยายามคิดออกและพบคำถามที่คล้ายกับของฉันมาก แต่มีคำตอบที่แตกต่างกันมากมายในการแก้ปัญหาเฉพาะที่คุณไม่ได้ใช้คอนโทรลเลอร์หลายตัวสำหรับแอปหน้าเดียว นั่นเป็นเพราะการใช้ตัวควบคุมหลายตัวในหน้าเดียวคงไม่เป็นการดีใช่หรือไม่? หรือมันเป็นไปไม่ได้? สมมติว่าฉันมีตัวควบคุมภาพหมุนแบบเตะตูดที่ทำงานในหน้าหลักแล้ว แต่จากนั้นฉันก็เรียนรู้วิธี (สมมติว่า) ใช้โมดอลและฉันต้องการตัวควบคุมใหม่สำหรับสิ่งนั้นเช่นกัน (หรือสิ่งอื่นใดที่ฉันต้องการตัวควบคุม) แล้วฉันจะทำอะไร? ฉันเคยเห็นคำตอบของคำถามอื่น ๆ ที่พวกเขาถามเกือบจะเหมือนกับฉันและมีคนตอบว่า "* OMG ทำไมคุณถึงทำอย่างนั้นเพียงแค่ทำสิ่งนี้ ... " วิธีที่ดีที่สุดคืออะไรหรือทำอย่างไร? แก้ไข หลาย ๆ ท่านกำลังตอบรับเพียงแค่ประกาศคอนโทรลเลอร์สองตัวจากนั้นใช้ ng-controller เพื่อเรียกใช้งาน ฉันใช้โค้ดด้านล่างนี้แล้วเรียก MainCtrl ด้วย ng-controller app.config(function($routeProvider, $locationProvider) { $routeProvider .when('/', { templateUrl: "templates/main.html", controller:'MainCtrl', }) .otherwise({ template: 'does not exists' }); }); ทำไมฉันถึงต้องตั้งคอนโทรลเลอร์ที่นี่ถ้าฉันสามารถใช้ ng-controller ได้โดยไม่ต้องใช้มัน …
9
จะใช้ <md-icon> ใน Angular Material ได้อย่างไร?
ฉันสงสัยว่าจะใช้ไอคอนของวัสดุได้อย่างไรเนื่องจากไม่ได้ผล: &lt;material-icon icon = "/img/icons/ic_access_time_24px.svg"&gt; &lt;/material-icon&gt; ฉันเดาว่ามีปัญหากับเส้นทางที่กำหนดให้เป็นพารามิเตอร์ของแอตทริบิวต์ icon ฉันต้องการทราบว่าโฟลเดอร์ไอคอนนี้อยู่ที่ไหน?
3
ทำความเข้าใจกับนิพจน์ 'track by' ของ ngRepeat
ฉันมีปัญหาในการทำความเข้าใจว่าแทร็กโดยการแสดงออกของ ng-repeat ใน angularjs ทำงานอย่างไร เอกสารประกอบหายากมาก: http://docs.angularjs.org/api/ng/directive/ngRepeat คุณสามารถอธิบายสิ่งที่แตกต่างระหว่างทั้งสองตัวอย่างของรหัสที่อยู่ในแง่ของdatabindingและด้านอื่น ๆ ที่เกี่ยวข้อง? กับ: track by $index &lt;!--names is an array--&gt; &lt;div ng-repeat="(key, value) in names track by $index"&gt; &lt;input ng-model="value[key]"&gt; &lt;/div&gt; ไม่มี (เอาต์พุตเดียวกัน) &lt;!--names is an array--&gt; &lt;div ng-repeat="(key, value) in names"&gt; &lt;input ng-model="value[key]"&gt; &lt;/div&gt;
14
ตั้งชื่อเพจโดยใช้ UI-Router
ฉันกำลังย้ายแอพที่ใช้ AngularJS ของฉันไปใช้ ui-router แทนการกำหนดเส้นทางในตัว ฉันได้กำหนดค่าตามที่แสดงด้านล่าง .config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/home'); $stateProvider .state('home', { url: '/home', templateUrl : 'views/home.html', data : { pageTitle: 'Home' } }) .state('about', { url: '/about', templateUrl : 'views/about.html', data : { pageTitle: 'About' } }) }); ฉันจะใช้ตัวแปร pageTitle เพื่อตั้งชื่อเพจแบบไดนามิกได้อย่างไร ฉันสามารถใช้การกำหนดเส้นทางในตัวได้ $rootScope.$on("$routeChangeSuccess", function(currentRoute, previousRoute){ $rootScope.pageTitle = $route.current.data.pageTitle; …
4
AngularJS: โรงงานคืออะไร?
ฉันทำงานมาหลายอย่างAngular.jsและโดยรวมแล้วฉันพบว่ามันเป็นกรอบที่น่าสนใจและทรงพลัง ฉันรู้ว่ามีการพูดคุยกันมากมายเกี่ยวกับบริการกับโรงงานเทียบกับผู้ให้บริการเทียบกับค่านิยม แต่ฉันยังค่อนข้างสับสนว่า a Factoryคืออะไร โรงงานได้รับการกำหนดไว้ในการอภิปราย StackOverflow อื่น ๆ ดังต่อไปนี้: โรงงาน ไวยากรณ์: module.factory( 'factoryName', function );ผลลัพธ์: เมื่อประกาศ factoryName เป็นอาร์กิวเมนต์ที่สามารถฉีดได้คุณจะได้รับค่าที่ส่งคืนโดยการเรียกใช้การอ้างอิงฟังก์ชันที่ส่งไปยัง module.factory ฉันพบว่าคำอธิบายนี้เข้าใจยากมากและไม่ได้เพิ่มความเข้าใจว่าโรงงานคืออะไร ทุกคนจะมีคำอธิบายใด ๆ หรือตัวอย่างชีวิตจริงเพื่อใช้ร่วมกันเกี่ยวกับสิ่งที่ตรงFactoryและเหตุผลที่คุณควรจะใช้มันแทนService, Providerหรืออื่น ๆ ? อัปเดต service ถืออ้างอิงไปยังวัตถุ A factory คือฟังก์ชันที่ส่งคืนวัตถุใด ๆ A provider คือฟังก์ชันที่ส่งกลับฟังก์ชันใด ๆ - ว้าว -
2
TypeError: ไม่สามารถอ่านคุณสมบัติ 'แล้ว' ของที่ไม่ได้กำหนด
loginService.islogged() ฟังก์ชันด้านบนส่งคืนสตริงเช่น "ล้มเหลว" อย่างไรก็ตามเมื่อฉันพยายามเรียกใช้ฟังก์ชันนั้นมันจะส่งคืนข้อผิดพลาดของ TypeError: Cannot read property 'then' of undefined และเคอร์เซอร์มีที่บ่งชี้ขวาหลังจากและก่อนที่connected.then ด้านล่างนี้คือฟังก์ชั่นเต็มรูปแบบ: var connected=loginService.islogged(); alert(connected); connected.then(function(msg){ alert("connected value is "+connected); alert("msg.data value is "+msg.data); if(!msg.data.account_session || loginService.islogged()=="failed") $location.path('/login'); }); อัปเดต นี่คือislogged()ฟังก์ชั่น islogged:function(){ var cUid=sessionService.get('uid'); alert("in loginServce, cuid is "+cUid); var $checkSessionServer=$http.post('data/check_session.php?cUid='+cUid); $checkSessionServer.then(function(){ alert("session check returned!"); console.log("checkSessionServer is "+$checkSessionServer); return …
5
AngularJS: รายการ ng-repeat ไม่ได้รับการอัพเดตเมื่อองค์ประกอบโมเดลถูกต่อจากอาร์เรย์แบบจำลอง
ฉันมีคอนโทรลเลอร์สองตัวและแชร์ข้อมูลระหว่างกันด้วยฟังก์ชัน app.factory คอนโทรลเลอร์ตัวแรกจะเพิ่มวิดเจ็ตในโมเดลอาร์เรย์ (pluginsDisplayed) เมื่อมีการคลิกลิงก์ วิดเจ็ตถูกผลักเข้าไปในอาร์เรย์และการเปลี่ยนแปลงนี้จะสะท้อนให้เห็นในมุมมอง (ซึ่งใช้ ng-repeat เพื่อแสดงเนื้อหาอาร์เรย์): &lt;div ng-repeat="pluginD in pluginsDisplayed"&gt; &lt;div k2plugin pluginname="{{pluginD.name}}" pluginid="{{pluginD.id}}"&gt;&lt;/div&gt; &lt;/div&gt; วิดเจ็ตสร้างขึ้นจากคำสั่งสามคำสั่ง k2plugin ลบและปรับขนาด คำสั่งการลบจะเพิ่มช่วงให้กับเทมเพลตของคำสั่ง k2plugin Array.splice()เมื่อกล่าวว่าช่วงที่มีการคลิกองค์ประกอบที่เหมาะสมลงในอาร์เรย์ที่ใช้ร่วมกันจะถูกลบออกด้วย อาร์เรย์ที่ใช้ร่วมกันได้รับการอัปเดตอย่างถูกต้อง แต่การเปลี่ยนแปลงจะไม่ปรากฏในมุมมอง อย่างไรก็ตามเมื่อเพิ่มองค์ประกอบอื่นหลังจากการลบมุมมองจะได้รับการรีเฟรชอย่างถูกต้องและองค์ประกอบที่ลบไปก่อนหน้านี้จะไม่แสดง ฉันผิดอะไร คุณช่วยอธิบายฉันได้ไหมว่าทำไมถึงใช้ไม่ได้? มีวิธีที่ดีกว่าในการทำสิ่งที่ฉันพยายามทำกับ AngularJS หรือไม่? นี่คือ index.html ของฉัน: &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"&gt; &lt;/script&gt; &lt;script src="main.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div ng-app="livePlugins"&gt; &lt;div ng-controller="pluginlistctrl"&gt; …
2
แสดง div ที่ซ่อนอยู่ใน ng-click ภายใน ng-repeat
ฉันกำลังทำงานกับแอพ Angular.js ที่กรองกระบวนการทางการแพทย์ผ่านไฟล์ json ฉันต้องการแสดงรายละเอียดของแต่ละขั้นตอนเมื่อคลิกชื่อของโพรซีเดอร์ (ในหน้าเดียวกัน) โดยใช้ ng-click นี่คือสิ่งที่ฉันมีจนถึงตอนนี้โดยตั้งค่า div .procedure-details ให้แสดง: none: &lt;ul class="procedures"&gt; &lt;li ng-repeat="procedure in procedures | filter:query | orderBy:orderProp"&gt; &lt;h4&gt;&lt;a href="#" ng-click="?"&gt;{{procedure.definition}}&lt;/a&gt;&lt;/h4&gt; &lt;div class="procedure-details"&gt; &lt;p&gt;Number of patient discharges: {{procedure.discharges}}&lt;/p&gt; &lt;p&gt;Average amount covered by Medicare: {{procedure.covered}}&lt;/p&gt; &lt;p&gt;Average total payments: {{procedure.payments}}&lt;/p&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; ฉันค่อนข้างใหม่ที่เชิงมุม ข้อเสนอแนะใด ๆ ?
6
AngularJS: ตัวอย่างพื้นฐานในการใช้การพิสูจน์ตัวตนใน Single Page Application
ฉันยังใหม่กับAngularJSและได้อ่านบทแนะนำของพวกเขาและรู้สึกได้ถึงมัน ฉันมีแบ็กเอนด์สำหรับโปรเจ็กต์ของฉันพร้อมที่RESTจะต้องตรวจสอบความถูกต้องของอุปกรณ์ปลายทางแต่ละจุด สิ่งที่ฉันต้องการจะทำอย่างไร ได้.) http://myproject.comฉันต้องการจะมีหน้าเดียวสำหรับโครงการของฉัน ข.) เมื่อผู้ใช้ฮิต URL ในเบราว์เซอร์บนพื้นฐานถ้าผู้ใช้เข้าสู่ระบบหรือไม่ได้เขาจะนำเสนอกับหน้าบ้าน / ดูหรือหน้าเข้าสู่ระบบ / มุมมองภายใต้ http://myproject.comURL c.) หากผู้ใช้ไม่ได้เข้าสู่ระบบผู้ใช้จะกรอกแบบฟอร์มและเซิร์ฟเวอร์จะตั้งค่าUSER_TOKENในเซสชันดังนั้นคำขอเพิ่มเติมไปยังปลายทางทั้งหมดจะได้รับการรับรองความถูกต้องตามUSER_TOKEN My Confusions a.) ฉันจะจัดการกับการพิสูจน์ตัวตนฝั่งไคลเอ็นต์โดยใช้ AngularJS ได้อย่างไร? ฉันเห็นที่นี่และที่นี่แต่ไม่เข้าใจวิธีใช้ b.) ฉันจะนำเสนอมุมมองที่แตกต่างกันให้กับผู้ใช้ได้อย่างไรโดยขึ้นอยู่กับว่าผู้ใช้ล็อกอินหรือไม่อยู่ภายใต้ url เดียวกันhttp://myproject.com ฉันใช้ angular.js เป็นครั้งแรกและเริ่มสับสนจริงๆว่าจะเริ่มอย่างไร คำแนะนำและ / หรือแหล่งข้อมูลใด ๆ จะได้รับการชื่นชมอย่างมาก
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.