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

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

2
การผูก ng-model ภายใน ng-repeat loop ใน AngularJS
ฉันกำลังพยายามจัดการกับปัญหาของขอบเขตภายในการวนซ้ำ ng-repeat - ฉันได้เรียกดูคำถามหลายข้อ แต่ยังไม่สามารถทำให้รหัสของฉันทำงานได้ รหัสคอนโทรลเลอร์: function Ctrl($scope) { $scope.lines = [{text: 'res1'}, {text:'res2'}]; } ดู: <div ng-app> <div ng-controller="Ctrl"> <div ng-repeat="line in lines"> <div class="preview">{{text}}{{$index}}</div> </div> <div ng-repeat="line in lines"> <-- typing here should auto update it's preview above --> <input value="{{line.text}}" ng-model="text{{$index}}"/> <!-- many other fields here that …

4
Angular ng-if =“” ที่มีหลายอาร์กิวเมนต์
ฉันกำลังพยายามเริ่มต้นการพัฒนาเชิงมุม และหลังจากตรวจสอบเอกสารแล้วยังมีคำถามบางอย่างอยู่ ฉันจะเขียน a ng-ifโดยมีอาร์กิวเมนต์หลายตัวที่สอดคล้องกับ if( a && b) หรือ if( a || b )

6
ng-bind-html เชิงมุมและคำสั่งภายใน
ลิงค์ Plunker ฉันมีองค์ประกอบที่ฉันต้องการผูก html กับมัน <div ng-bind-html="details" upper></div> ที่ได้ผล ตอนนี้ฉันยังมีคำสั่งที่ผูกไว้กับ html ที่ถูกผูกไว้: $scope.details = 'Success! <a href="#/details/12" upper>details</a>' แต่คำสั่งที่upperมี div และ anchor จะไม่ประเมิน ฉันจะทำให้มันทำงานได้อย่างไร?

3
AngularJS - ตัวยึดสำหรับผลลัพธ์ว่างจากตัวกรอง
ฉันต้องการมีตัวยึดตำแหน่งเช่น<No result>เมื่อผลการกรองกลับเป็นค่าว่าง ใครช่วยได้บ้าง ไม่รู้จะเริ่มตรงไหน ... HTML : <div ng-controller="Ctrl"> <h1>My Foo</h1> <ul> <li ng-repeat="foo in foos"> <a href="#" ng-click="setBarFilter(foo.name)">{{foo.name}}</a> </li> </ul> <br /> <h1>My Bar</h1> <ul> <li ng-repeat="bar in bars | filter:barFilter">{{bar.name}}</li> </ul> </div> JS : function Ctrl($scope) { $scope.foos = [{ name: 'Foo 1' },{ name: 'Foo 2' },{ …

9
การรับค่าจากสตริงการสืบค้นใน url โดยใช้ AngularJS $ location
เกี่ยวกับ $ location.search เอกสารกล่าวว่า ส่งคืนส่วนการค้นหา (เป็นวัตถุ) ของ url ปัจจุบันเมื่อเรียกโดยไม่มีพารามิเตอร์ใด ๆ ใน URL ของฉันสตริงการสืบค้นของฉันมีพารามิเตอร์ '? test_user_bLzgB' โดยไม่มีค่า '$ location.search ()' ยังส่งคืนวัตถุ ฉันจะรับข้อความจริงได้อย่างไร


2
Directive แยกขอบเขตด้วยขอบเขต ng-repeat ใน AngularJS
ฉันมีคำสั่งที่มีขอบเขตแยก (เพื่อให้ฉันสามารถใช้คำสั่งซ้ำในที่อื่น ๆ ได้) และเมื่อฉันใช้คำสั่งนี้กับ an ng-repeatมันก็ไม่ทำงาน ฉันได้อ่านเอกสารประกอบและคำตอบของ Stack Overflow ทั้งหมดในหัวข้อนี้และเข้าใจปัญหา ฉันเชื่อว่าฉันได้หลีกเลี่ยง gotcha ปกติทั้งหมด ดังนั้นฉันจึงเข้าใจว่ารหัสของฉันล้มเหลวเนื่องจากขอบเขตที่สร้างขึ้นโดยng-repeatคำสั่ง คำสั่งของฉันสร้างขอบเขตแยกและทำการผูกข้อมูลสองทางกับวัตถุในขอบเขตหลัก คำสั่งของฉันจะกำหนดค่าออบเจ็กต์ใหม่ให้กับตัวแปรที่ถูกผูกไว้นี้และจะทำงานได้อย่างสมบูรณ์เมื่อใช้คำสั่งของฉันโดยไม่มีng-repeat(ตัวแปรหลักได้รับการอัปเดตอย่างถูกต้อง) อย่างไรก็ตามng-repeatการกำหนดจะสร้างตัวแปรใหม่ในng-repeatขอบเขตและตัวแปรหลักไม่เห็นการเปลี่ยนแปลง ทั้งหมดนี้เป็นไปตามที่คาดไว้ตามสิ่งที่ฉันได้อ่าน ฉันยังได้อ่านว่าเมื่อมีคำสั่งหลายคำสั่งในองค์ประกอบหนึ่ง ๆ จะมีการสร้างขอบเขตเดียว และpriorityสามารถตั้งค่าa ในแต่ละคำสั่งเพื่อกำหนดลำดับที่จะนำคำสั่งไปใช้ คำสั่งจะเรียงลำดับตามลำดับความสำคัญจากนั้นจึงเรียกฟังก์ชันคอมไพล์ (ค้นหาลำดับความสำคัญของคำที่http://docs.angularjs.org/guide/directive ) ดังนั้นฉันหวังว่าฉันจะสามารถใช้ลำดับความสำคัญเพื่อให้แน่ใจว่าคำสั่งของฉันทำงานก่อนและจบลงด้วยการสร้างขอบเขตแยกและเมื่อng-repeatรันมันจะใช้ขอบเขตแยกซ้ำแทนการสร้างขอบเขตที่สืบทอดต้นแบบมาจากขอบเขตหลัก เอกสารระบุว่าที่วิ่งสั่งที่ระดับความสำคัญng-repeat 1000ไม่ชัดเจนว่า1เป็นระดับความสำคัญสูงกว่าหรือระดับความสำคัญต่ำกว่า เมื่อผมใช้ระดับความสำคัญในคำสั่งของฉันมันไม่ได้สร้างความแตกต่างดังนั้นฉันพยายาม1 2000แต่นั่นทำให้สิ่งต่าง ๆ แย่ลง: การผูกสองทางundefinedของฉันกลายเป็นและคำสั่งของฉันไม่แสดงอะไรเลย ผมได้สร้างไวโอลินเพื่อแสดงให้เห็นปัญหาของฉัน ฉันได้แสดงความคิดเห็นเกี่ยวกับpriorityการตั้งค่าในคำสั่งของฉัน ฉันมีรายการชื่อออบเจ็กต์และคำสั่งที่เรียกname-rowซึ่งแสดงฟิลด์ชื่อและนามสกุลในออบเจ็กต์ชื่อ เมื่อชื่อที่ปรากฏถูกคลิกฉันต้องการให้ตั้งค่าselectedตัวแปรในขอบเขตหลัก อาร์เรย์ของชื่อselectedตัวแปรจะถูกส่งผ่านไปยังname-rowคำสั่งโดยใช้การผูกข้อมูลสองทาง ฉันรู้วิธีทำให้สิ่งนี้ทำงานได้โดยเรียกใช้ฟังก์ชันในขอบเขตหลัก ฉันยังรู้ด้วยว่าถ้าselectedอยู่ในวัตถุอื่นและฉันผูกกับวัตถุภายนอกสิ่งต่างๆก็จะใช้ได้ แต่ฉันไม่สนใจวิธีแก้ปัญหาเหล่านั้นในขณะนี้ แต่คำถามที่ฉันมีคือ: ฉันจะป้องกันไม่ให้ng-repeatสร้างขอบเขตที่สืบทอดต้นแบบจากขอบเขตหลักและใช้ขอบเขตแยกของคำสั่งแทนได้อย่างไร เหตุใดระดับความสำคัญ2000ในคำสั่งของฉันจึงไม่ทำงาน การใช้ Batarang สามารถทราบได้หรือไม่ว่าใช้ขอบเขตประเภทใด?

4
เรียกใช้ฟังก์ชันคอนโทรลเลอร์จากคำสั่งโดยไม่มีขอบเขตแยกใน AngularJS
ดูเหมือนฉันจะไม่พบวิธีเรียกใช้ฟังก์ชันในขอบเขตหลักจากภายในคำสั่งโดยไม่ใช้ขอบเขตแยก ฉันรู้ว่าถ้าฉันใช้ขอบเขตแยกฉันสามารถใช้ "&" ในการแยกเพื่อเข้าถึงฟังก์ชันในขอบเขตหลัก แต่การใช้ขอบเขตที่แยกเมื่อไม่จำเป็นจะมีผล พิจารณา HTML ต่อไปนี้: <button ng-hide="hideButton()" confirm="Are you sure?" confirm-action="doIt()">Do It</button> ในตัวอย่างง่ายๆนี้ฉันต้องการแสดงกล่องโต้ตอบยืนยัน JavaScript และเรียก doIt () เฉพาะเมื่อคลิก "ตกลง" ในกล่องโต้ตอบการยืนยัน นี่เป็นเรื่องง่ายโดยใช้ขอบเขตแยก คำสั่งจะมีลักษณะดังนี้: .directive('confirm', function () { return { restrict: 'A', scope: { confirm: '@', confirmAction: '&' }, link: function (scope, element, attrs) { element.bind('click', function (e) { …

7
วิธีการดีบัก js ใน jsfiddle
ฉันกำลังดู jsfiddle นี้: http://jsfiddle.net/carpasse/mcVfK/ มันใช้งานได้ดีนั่นไม่ใช่ปัญหาฉันแค่อยากรู้วิธีการดีบักผ่านจาวาสคริปต์ ฉันพยายามใช้คำสั่งดีบักเกอร์ แต่หาไม่พบในแท็บแหล่งที่มา? มีความคิดอย่างไรที่ฉันจะแก้ไขข้อบกพร่องนี้ได้ รหัสบางส่วนจากซอ: angular.module('app', ['appServices']) .config(['$routeProvider', function($routeProvider) { $routeProvider. when('/home', {templateUrl: 'home.html', controller: HomeCtrl}). when('/list', {templateUrl: 'list.html', controller: ListCtrl}). when('/detail/:itemId', {templateUrl: 'detail.html', controller: DetailCtrl}). when('/settings', {templateUrl: 'settings.html', controller: SettingsCtrl}). otherwise({redirectTo: '/home'}); }]);

2
การเข้าถึงแอตทริบิวต์จากคำสั่ง AngularJS
เทมเพลต AngularJS ของฉันมีไวยากรณ์ HTML ที่กำหนดเองเช่น: <su-label tooltip="{{field.su_documentation}}">{{field.su_name}}</su-label> ฉันสร้างคำสั่งเพื่อประมวลผล: .directive('suLabel', function() { return { restrict: 'E', replace: true, transclude: true, scope: { title: '@tooltip' }, template: '<label><a href="#" rel="tooltip" title="{{title}}" data-placement="right" ng-transclude></a></label>', link: function(scope, element, attrs) { if (attrs.tooltip) { element.addClass('tooltip-title'); } }, } }) ทุกอย่างทำงานได้ดียกเว้นattrs.tooltipนิพจน์ซึ่งจะส่งคืนเสมอundefinedแม้ว่าtooltipแอตทริบิวต์จะมองเห็นได้จากคอนโซล JavaScript ของ Google Chrome เมื่อทำไฟล์console.log(attrs). …

3
AngularJS ตัวกรองหลายตัวพร้อมฟังก์ชันตัวกรองที่กำหนดเอง
ฉันกำลังพยายามกรองรายการด้วยตัวกรองหลายตัว + ด้วยฟังก์ชันตัวกรองที่กำหนดเอง ตัวอย่าง jsfiddle ที่ใช้งานได้ดั้งเดิมคือhttp://jsfiddle.net/ed9A2/1/แต่ตอนนี้ฉันต้องการเปลี่ยนวิธีการกรองอายุ ฉันต้องการเพิ่มตัวกรองที่กำหนดเองเพื่อให้อายุของมันกรองตามค่าอินพุตสองค่าซึ่งคือmin_ageและmax_age (ระหว่างอายุ) หลังจากดูใน doc. ฉันพบว่ามีคนที่มีคำถามคล้าย ๆ กันและผู้ใช้ Mark Rajcok ตอบhttp://docs.angularjs.org/api/ng.filter:filter#comment-648569667ดูดีและน่าจะใช้งานได้ แต่ฉันมีปัญหาในการนำไปใช้กับรหัสของฉันซึ่งส่วนใหญ่ดูเหมือนจะเป็นเพราะฉันมีตัวกรองอื่น ๆ ฉันใหม่มากกับ AngularJS :( ซอลองและไม่ทำงานของฉันอยู่ที่นี่http://jsfiddle.net/ed9A2/20/ สำเนาวางรหัสที่ไม่ทำงานของฉันอยู่ที่นี่ ดู <div ng-app ng-controller="MainController"> <table class="fancyTable"> <tr> <th>Player id</th> <th>Player name</th> <th>Age</th> </tr> <tr> <td><input ng-model="player_id" /></td> <td><input ng-model="player_name" /></td> <td> Min Age:<input ng-model="min_age" /> Max Age:<input …

3
วิธีรีเฟรช / ยกเลิกการแคชทรัพยากร $ ใน AngularJS
ฉันมีทรัพยากร User $ ง่ายๆที่ใช้การใช้งานแคช $ http เริ่มต้นดังนี้: factory('User', function($resource){ return $resource(endpoint + '/user/current/:projectId', {}, {get: { cache: true, method: 'GET' } } ); }) สิ่งนี้ใช้ได้ดีมากเช่นเซิร์ฟเวอร์ของฉันถูกเรียกเพียงครั้งเดียวในแอปพลิเคชันของฉันจากนั้นค่าจะดึงมาจากแคช แต่ฉันต้องการรีเฟรชค่าจากเซิร์ฟเวอร์หลังจากการดำเนินการบางอย่าง มีวิธีง่ายๆในการทำเช่นนั้นหรือไม่? ขอบคุณ.


4
Webstorm:“ ไม่สามารถแก้ไขไดเร็กทอรี”
สิ่งนี้เริ่มรบกวนฉันและฉันต้องการปิดหรือแก้ไข ดังนั้น Webstorm จึงมีคุณสมบัติที่น่าสนใจในตัวแยกวิเคราะห์ HTML ที่จะพยายามแก้ไขไดเร็กทอรีในสตริงที่ควรอ้างอิงไฟล์ในโปรเจ็กต์ของคุณ ตัวอย่างเช่น: Webstorm ถูกต้อง รหัสปลายด้านหน้าของฉันคือทั้งหมดใน/appแต่เซิร์ฟเวอร์ของฉันให้บริการขึ้นไฟล์ใน app บนรากดังนั้นในบริบทเว็บเป็นจริงเพียง/app /พฤติกรรมนี้ส่งผลกระทบต่อเทมเพลตเชิงมุมของฉันด้วยเช่นกัน: และเส้นทาง angular-ui ของฉัน (ฉันคิดว่ามันน่าจะเป็นเช่นนั้นสำหรับเส้นทางเชิงมุมปกติเช่นกัน) มีวิธีใดบ้างที่ฉันสามารถเปลี่ยนเว็บสตอร์มให้ถือว่า/appเป็นรูทเพื่อให้ฟีเจอร์นี้มีประโยชน์ ถ้าไม่ได้มีวิธีปิดการใช้งานนี้หรือไม่? ฉันพยายามเข้าไปตรวจสอบ แต่ไม่พบตัวเลือกสำหรับมัน: และไม่ใช่ไม่ใช่ XML ... ฉันลองแล้ว ช่วยชื่นชม ขอบคุณ ...

10
AngularJS เรียงลำดับตามคุณสมบัติ
สิ่งที่ฉันพยายามทำคือจัดเรียงข้อมูลบางส่วนตามคุณสมบัติ นี่คือตัวอย่างที่ฉันควรจะใช้งานได้ แต่ไม่ได้ผล ส่วน HTML: <div ng-app='myApp'> <div ng-controller="controller"> <ul> <li ng-repeat="(key, value) in testData | orderBy:'value.order'"> {{value.order}}. {{key}} -> {{value.name}} </li> </ul> </div> </div> ส่วน JS: var myApp = angular.module('myApp', []); myApp.controller('controller', ['$scope', function ($scope) { $scope.testData = { C: {name:"CData", order: 1}, B: {name:"BData", order: 2}, A: {name:"AData", …

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