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

ใน AngularJS ขอบเขตคืออ็อบเจ็กต์ที่อ้างถึงโมเดลแอ็พพลิเคชัน เป็นบริบทการดำเนินการสำหรับนิพจน์

6
การใช้สัญลักษณ์ '@', '&', '=' และ '>' ในการเชื่อมโยงขอบเขตคำสั่งที่กำหนดเอง: AngularJS
ฉันได้อ่านมากเกี่ยวกับการใช้สัญลักษณ์เหล่านี้ในการดำเนินการตามคำสั่งที่กำหนดเองใน AngularJS แต่แนวคิดยังไม่ชัดเจนสำหรับฉัน ฉันหมายความว่าอย่างไรถ้าฉันใช้ค่าขอบเขตหนึ่งค่าในคำสั่งที่กำหนดเอง var mainApp = angular.module("mainApp", []); mainApp.directive('modalView',function(){ return{ restrict:'E', scope:'@' OR scope:'&' OR scope:'=' OR scope:'>' OR scope:true } }); เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล เรากำลังทำอะไรกับขอบเขตที่นี่? ฉันไม่แน่ใจว่า"ขอบเขต: '>'"มีอยู่ในเอกสารอย่างเป็นทางการหรือไม่ มันถูกใช้ในโครงการของฉัน แก้ไข-1 การใช้"ขอบเขต: '>'"เป็นปัญหาในโครงการของฉันและได้รับการแก้ไขแล้ว
11
ขอบเขตการเข้าถึง AngularJS จากฟังก์ชัน js ภายนอก
ฉันกำลังพยายามดูว่ามีวิธีง่ายๆในการเข้าถึงขอบเขตภายในของคอนโทรลเลอร์หรือไม่ผ่านฟังก์ชั่นจาวาสคริปต์ภายนอก (ไม่เกี่ยวข้องกับตัวควบคุมเป้าหมายอย่างสมบูรณ์) ฉันเคยเห็นคำถามอื่น ๆ สองสามข้อที่นี่ angular.element("#scope").scope(); จะดึงขอบเขตจากองค์ประกอบ DOM แต่ความพยายามของฉันในขณะนี้ไม่ได้ผลลัพธ์ที่เหมาะสม นี่คือ jsfiddle: http://jsfiddle.net/sXkjc/5/ ฉันกำลังจะเปลี่ยนจาก JS ธรรมดาไปเป็น Angular เหตุผลหลักที่ฉันพยายามทำให้สำเร็จคือการรักษารหัสห้องสมุดเดิมของฉันให้สมบูรณ์มากที่สุด ประหยัดความจำเป็นสำหรับฉันในการเพิ่มแต่ละฟังก์ชันลงในคอนโทรลเลอร์ มีความคิดเห็นเกี่ยวกับวิธีที่ฉันจะบรรลุเป้าหมายนี้ได้อย่างไร ยินดีรับฟังความคิดเห็นเกี่ยวกับซอข้างต้นด้วย
1
การกรองแบบสองทางใน AngularJS ทำอย่างไร?
สิ่งที่น่าสนใจอย่างหนึ่งที่ AngularJS สามารถทำได้คือใช้ตัวกรองกับนิพจน์การเชื่อมโยงฐานข้อมูลซึ่งเป็นวิธีที่สะดวกในการนำไปใช้เช่นสกุลเงินเฉพาะวัฒนธรรมหรือการจัดรูปแบบวันที่ของคุณสมบัติของโมเดล นอกจากนี้ยังดีที่มีคุณสมบัติที่คำนวณในขอบเขต ปัญหาคือคุณลักษณะเหล่านี้ไม่ทำงานกับสถานการณ์จำลองการเชื่อมต่อฐานข้อมูลแบบสองทาง - การเชื่อมฐานข้อมูลทางเดียวจากขอบเขตไปยังมุมมอง นี่ดูเหมือนจะเป็นการมองข้ามไปอย่างชัดเจนในห้องสมุดที่ยอดเยี่ยมอย่างอื่นหรือฉันพลาดอะไรไป? ในKnockoutJSฉันสามารถสร้างคุณสมบัติที่คำนวณด้วยการอ่าน / เขียนซึ่งอนุญาตให้ฉันระบุคู่ของฟังก์ชันซึ่งเรียกว่าเพื่อรับค่าของคุณสมบัติและอีกฟังก์ชันหนึ่งที่ถูกเรียกเมื่อตั้งค่าคุณสมบัติ สิ่งนี้ทำให้ฉันสามารถใช้ตัวอย่างเช่นอินพุตที่รับรู้วัฒนธรรมโดยให้ผู้ใช้พิมพ์ "$ 1.24" และแยกวิเคราะห์เป็นลอยใน ViewModel และมีการเปลี่ยนแปลงใน ViewModel ที่แสดงในอินพุต สิ่งที่ใกล้เคียงที่สุดที่ฉันสามารถพบได้คือการใช้$scope.$watch(propertyName, functionOrNGExpression);สิ่งนี้ช่วยให้ฉันมีฟังก์ชันที่เรียกใช้เมื่อคุณสมบัติในไฟล์$scopeเปลี่ยนแปลง แต่สิ่งนี้ไม่สามารถแก้ปัญหาได้เช่นปัญหาการป้อนข้อมูลที่คำนึงถึงวัฒนธรรม สังเกตเห็นปัญหาเมื่อฉันพยายามแก้ไข$watchedคุณสมบัติภายใน$watchวิธีการ: $scope.$watch("property", function (newValue, oldValue) { $scope.outputMessage = "oldValue: " + oldValue + " newValue: " + newValue; $scope.property = Globalize.parseFloat(newValue); }); ( http://jsfiddle.net/gyZH8/2/ ) องค์ประกอบการป้อนข้อมูลจะสับสนมากเมื่อผู้ใช้เริ่มพิมพ์ ฉันปรับปรุงโดยการแยกคุณสมบัติออกเป็นสองคุณสมบัติหนึ่งสำหรับค่าที่ไม่ได้แยกวิเคราะห์และอีกค่าหนึ่งสำหรับค่าที่แยกวิเคราะห์: $scope.visibleProperty= …
14
คอนโทรลเลอร์ไม่ใช่ฟังก์ชั่นไม่ได้กำหนดขณะที่กำหนดคอนโทรลเลอร์ทั่วโลก
ฉันกำลังเขียนแอปพลิเคชันตัวอย่างโดยใช้ angularjs ฉันได้รับข้อผิดพลาดที่ระบุไว้ด้านล่างบนเบราว์เซอร์ Chrome ข้อผิดพลาดคือ ข้อผิดพลาด: [ng: areq] http://errors.angularjs.org/1.3.0-beta.17/ng/areq?p0=ContactController&p1=not%20a%20function%2C%20got%20undefined ซึ่งแสดงผลเป็น Argument 'ContactController' ไม่ใช่ฟังก์ชันไม่ได้กำหนดไว้ รหัส <!DOCTYPE html> <html ng-app> <head> <script src="../angular.min.js"></script> <script type="text/javascript"> function ContactController($scope) { $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"]; $scope.add = function() { $scope.contacts.push($scope.newcontact); $scope.newcontact = ""; }; } </script> </head> <body> <h1> modules sample </h1> <div ng-controller="ContactController"> Email:<input …
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 ฉันทำอะไรผิดกับรหัสของฉัน?
5
อัพเดตตัวแปรขอบเขตหลักใน AngularJS
ฉันมีตัวควบคุมสองตัวตัวหนึ่งห่อหุ้มไว้ด้วยกัน ตอนนี้ฉันรู้ว่าขอบเขตลูกสืบทอดคุณสมบัติจากขอบเขตหลัก แต่มีวิธีอัปเดตตัวแปรขอบเขตหลักหรือไม่ จนถึงตอนนี้ฉันยังไม่พบวิธีแก้ปัญหาที่ชัดเจน ในสถานการณ์ของฉันฉันมีตัวควบคุมปฏิทินในแบบฟอร์ม ฉันต้องการอัปเดตวันที่เริ่มต้นและวันที่สิ้นสุดจากขอบเขตหลัก (ซึ่งก็คือแบบฟอร์ม) เพื่อให้แบบฟอร์มมีวันที่เริ่มต้นและวันที่สิ้นสุดเมื่อส่ง
4
การส่งผ่านขอบเขตปัจจุบันไปยังบริการ AngularJS
การส่ง "กระแส" $scopeไปยังบริการ AngularJS ถูกต้องหรือไม่ ฉันอยู่ในสถานการณ์ที่ฉันใช้บริการ $ โดยรู้ว่ามันถูกใช้โดยคอนโทรลเลอร์เพียงตัวเดียวและฉันต้องการอ้างอิงถึงขอบเขตของคอนโทรลเลอร์ในวิธีการบริการของ $ เอง นี่ถูกต้องตามหลักปรัชญาหรือไม่? หรือฉันจะดีกว่าที่จะถ่ายทอดกิจกรรมไปยัง $ rootScope แล้วทำให้คอนโทรลเลอร์ของฉันฟังมัน
5
AngularJS: รายการ ng-repeat ไม่ได้รับการอัพเดตเมื่อองค์ประกอบโมเดลถูกต่อจากอาร์เรย์แบบจำลอง
ฉันมีคอนโทรลเลอร์สองตัวและแชร์ข้อมูลระหว่างกันด้วยฟังก์ชัน app.factory คอนโทรลเลอร์ตัวแรกจะเพิ่มวิดเจ็ตในโมเดลอาร์เรย์ (pluginsDisplayed) เมื่อมีการคลิกลิงก์ วิดเจ็ตถูกผลักเข้าไปในอาร์เรย์และการเปลี่ยนแปลงนี้จะสะท้อนให้เห็นในมุมมอง (ซึ่งใช้ ng-repeat เพื่อแสดงเนื้อหาอาร์เรย์): <div ng-repeat="pluginD in pluginsDisplayed"> <div k2plugin pluginname="{{pluginD.name}}" pluginid="{{pluginD.id}}"></div> </div> วิดเจ็ตสร้างขึ้นจากคำสั่งสามคำสั่ง k2plugin ลบและปรับขนาด คำสั่งการลบจะเพิ่มช่วงให้กับเทมเพลตของคำสั่ง k2plugin Array.splice()เมื่อกล่าวว่าช่วงที่มีการคลิกองค์ประกอบที่เหมาะสมลงในอาร์เรย์ที่ใช้ร่วมกันจะถูกลบออกด้วย อาร์เรย์ที่ใช้ร่วมกันได้รับการอัปเดตอย่างถูกต้อง แต่การเปลี่ยนแปลงจะไม่ปรากฏในมุมมอง อย่างไรก็ตามเมื่อเพิ่มองค์ประกอบอื่นหลังจากการลบมุมมองจะได้รับการรีเฟรชอย่างถูกต้องและองค์ประกอบที่ลบไปก่อนหน้านี้จะไม่แสดง ฉันผิดอะไร คุณช่วยอธิบายฉันได้ไหมว่าทำไมถึงใช้ไม่ได้? มีวิธีที่ดีกว่าในการทำสิ่งที่ฉันพยายามทำกับ AngularJS หรือไม่? นี่คือ index.html ของฉัน: <!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"> </script> <script src="main.js"></script> </head> <body> <div ng-app="livePlugins"> <div ng-controller="pluginlistctrl"> …
9
ตรวจสอบว่าวัตถุว่างเปล่าใช้ได้กับ ng-show แต่ไม่ใช่จากคอนโทรลเลอร์?
ฉันมีวัตถุ JS ที่ประกาศเช่นนั้น $scope.items = {}; ฉันยังมีคำขอ $ http ที่เติมสิ่งของนี้ด้วยรายการ ฉันต้องการตรวจสอบว่ารายการนี้ว่างเปล่าหรือไม่ปรากฏว่า ng-show รองรับสิ่งนี้ ... ฉันป้อน ng-show="items" และมันใช้งานได้อย่างน่าอัศจรรย์ฉันก็อยากจะทำเช่นเดียวกันจากคอนโทรลเลอร์ แต่ดูเหมือนจะใช้งานไม่ได้ดูเหมือนว่าฉันอาจต้องทำซ้ำบนวัตถุเพื่อดูว่ามีคุณสมบัติหรือไม่ใช้ lodash หรือขีดล่าง . มีทางเลือกอื่นไหม ฉันไม่ได้ลอง alert($scope.items == true); แต่จะคืนค่าเป็นเท็จเสมอเมื่อวัตถุถูกสร้างขึ้นและเมื่อมีการเติมข้อมูล$httpดังนั้นจึงไม่ทำงานในลักษณะนั้น
7
ฉันจะฉีดคอนโทรลเลอร์ลงในคอนโทรลเลอร์อื่นใน AngularJS ได้อย่างไร
ฉันเพิ่งเริ่มใช้ Angular และพยายามคิดหาวิธีทำสิ่งต่างๆ ... เมื่อใช้ AngularJS ฉันจะฉีดคอนโทรลเลอร์เพื่อใช้ภายในคอนโทรลเลอร์อื่นได้อย่างไร ฉันมีตัวอย่างข้อมูลต่อไปนี้: var app = angular.module("testApp", ['']); app.controller('TestCtrl1', ['$scope', function ($scope) { $scope.myMethod = function () { console.log("TestCtrl1 - myMethod"); } }]); app.controller('TestCtrl2', ['$scope', 'TestCtrl1', function ($scope, TestCtrl1) { TestCtrl1.myMethod(); }]); เมื่อฉันดำเนินการสิ่งนี้ฉันได้รับข้อผิดพลาด: Error: [$injector:unpr] Unknown provider: TestCtrl1Provider <- TestCtrl1 http://errors.angularjs.org/1.2.21/$injector/unpr?p0=TestCtrl1Provider%20%3C-%20TestCtrl1 ฉันควรพยายามใช้คอนโทรลเลอร์ภายในคอนโทรลเลอร์อื่นหรือไม่หรือฉันควรให้บริการนี้
9
ตั้งค่าตัวแปรขอบเขตเชิงมุมในมาร์กอัป
คำถามง่ายๆ: ฉันจะตั้งค่าขอบเขตใน html เพื่อให้คอนโทรลเลอร์ของฉันอ่านได้อย่างไร var app = angular.module('app', []); app.controller('MyController', function($scope) { console.log($scope.myVar); }); <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app='app'> <div ng-controller="MyController" app-myVar="test"> {{myVar}} </div> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด JSFiddle: http://jsfiddle.net/ncapito/YdQcX/
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) { …
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.