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

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

19
ฉันจะเข้าถึงตัวแปร $ scope ในคอนโซลของเบราว์เซอร์โดยใช้ AngularJS ได้อย่างไร
ฉันต้องการเข้าถึง$scopeตัวแปรของฉันในคอนโซล JavaScript ของ Chrome ฉันจะทำอย่างไร ฉันไม่สามารถมองเห็น$scopeหรือชื่อของโมดูลmyappในคอนโซลเป็นตัวแปร

6
ฉันจะใช้ $ scope $ เฝ้าดูและ $ scope $ นำไปใช้ใน AngularJS ได้อย่างไร
ฉันไม่เข้าใจวิธีการใช้งานและ$scope.$watch $scope.$applyเอกสารทางการไม่เป็นประโยชน์ สิ่งที่ฉันไม่เข้าใจเป็นพิเศษ: พวกเขาเชื่อมต่อกับ DOM หรือไม่? ฉันจะอัปเดตการเปลี่ยนแปลง DOM เป็นโมเดลได้อย่างไร จุดเชื่อมต่อระหว่างพวกเขาคืออะไร? ฉันพยายามกวดวิชานี้แต่มันต้องใช้ความเข้าใจของ$watchและ$applyให้ได้รับ ทำอะไร$applyและ$watchทำอย่างไรและฉันจะใช้อย่างเหมาะสมได้อย่างไร

18
อะไรคือความแตกต่างระหว่าง '@' และ '=' ในขอบเขตคำสั่งใน AngularJS?
ฉันได้อ่านเอกสารของAngularJSในหัวข้ออย่างระมัดระวังแล้วเล่นกับคำสั่ง นี่คือไวโอลิน และนี่คือตัวอย่างบางส่วนที่เกี่ยวข้อง: จากHTML : <pane bi-title="title" title="{{title}}">{{text}}</pane> จากคำสั่งบานหน้าต่าง: scope: { biTitle: '=', title: '@', bar: '=' }, มีหลายสิ่งที่ฉันไม่ได้รับ: ทำไมฉันต้องใช้"{{title}}"กับ'@'และ"title"กับ'='? ฉันสามารถเข้าถึงขอบเขตพาเรนต์โดยตรงได้หรือไม่โดยไม่ต้องตกแต่งองค์ประกอบด้วยแอตทริบิวต์ เอกสารอธิบายว่า"บ่อยครั้งที่ต้องการส่งข้อมูลจากขอบเขตแยกผ่านการแสดงออกและขอบเขตหลัก"แต่ดูเหมือนว่าจะทำงานได้ดีกับการเชื่อมโยงสองทิศทางเช่นกัน ทำไมเส้นทางนิพจน์ถึงดีกว่า ฉันพบซออื่นที่แสดงวิธีแก้ปัญหาการแสดงออกเช่นกัน: http://jsfiddle.net/maxisam/QrCXh/

7
'this' vs $ scope ในตัวควบคุม AngularJS
ในส่วน"สร้างส่วนประกอบ" ในหน้าแรกของ AngularJSมีตัวอย่างนี้: controller: function($scope, $element) { var panes = $scope.panes = []; $scope.select = function(pane) { angular.forEach(panes, function(pane) { pane.selected = false; }); pane.selected = true; } this.addPane = function(pane) { if (panes.length == 0) $scope.select(pane); panes.push(pane); } } แจ้งให้ทราบว่าselectวิธีการที่จะถูกเพิ่ม$scopeแต่วิธีการที่จะถูกเพิ่มaddPane thisหากฉันเปลี่ยน$scope.addPaneเป็นรหัสจะแตก เอกสารบอกว่าจริงๆแล้วมีความแตกต่าง แต่ไม่ได้พูดถึงความแตกต่าง: รุ่นก่อนหน้าของ Angular (pre 1.0 RC) อนุญาตให้คุณใช้วิธีการthisสลับแทนกันได้$scopeแต่นี่ไม่ใช่กรณีอีกต่อไป …

28
AngularJS: ป้องกันข้อผิดพลาดในการแยกย่อย $ ที่กำลังดำเนินอยู่เมื่อมีการโทรขอบเขต $ $ ใช้ ()
ฉันพบว่าฉันต้องอัปเดตหน้าเว็บของฉันเป็นขอบเขตด้วยตนเองมากขึ้นเรื่อย ๆ นับตั้งแต่สร้างแอปพลิเคชันเป็นมุม วิธีเดียวที่ฉันรู้ในการทำเช่นนี้คือโทร$apply()จากขอบเขตของตัวควบคุมและคำสั่งของฉัน ปัญหาเกี่ยวกับสิ่งนี้คือมันยังคงทิ้งข้อผิดพลาดไปยังคอนโซลที่อ่าน: ข้อผิดพลาด: กำลังสรุป $ กำลังดำเนินการอยู่ ไม่มีใครรู้วิธีหลีกเลี่ยงข้อผิดพลาดนี้หรือทำสิ่งเดียวกัน แต่แตกต่างกัน?

9
ขอบเขตหลักเข้าถึง AngularJS จากตัวควบคุมลูก
ฉันตั้งค่าตัวควบคุมโดยใช้ data-ng-controller="xyzController as vm" ฉันมีสถานการณ์ที่มีตัวควบคุมซ้อนกันของพ่อแม่ / ลูก ฉันไม่มีปัญหาในการเข้าถึงคุณสมบัติหลักใน HTML ที่ซ้อนกันโดยใช้$parent.vm.propertyแต่ฉันไม่สามารถหาวิธีเข้าถึงคุณสมบัติหลักได้จากภายในตัวควบคุมลูกของฉัน ฉันลองฉีด $ scope แล้วใช้$scope.$parent.vm.propertyแต่มันไม่ทำงานเหรอ ใครสามารถให้คำแนะนำได้บ้าง

6
$ rootScope $ broadcast เทียบกับ $ scope $ emit
ตอนนี้ที่ความแตกต่างระหว่างประสิทธิภาพ$broadcastและ$emitได้รับการกำจัดจะมีเหตุผลใด ๆ จะชอบ$scope.$emitไป$rootScope.$broadcast? พวกเขาแตกต่างกันใช่ $emit ถูก จำกัด ในลำดับชั้นของขอบเขต (ขึ้นไป) - อาจดีถ้ามันเหมาะกับการออกแบบของคุณ แต่ดูเหมือนว่าฉันจะมีข้อ จำกัด โดยพลการ $rootScope.$broadcastทำงานในทุกสิ่งที่เลือกที่จะฟังเหตุการณ์ซึ่งเป็นข้อ จำกัด ที่สมเหตุสมผลมากขึ้นในใจของฉัน ฉันพลาดอะไรไปรึเปล่า? แก้ไข: เพื่อชี้แจงในการตอบสนองต่อคำตอบทิศทางของการจัดส่งไม่ใช่ปัญหาที่ฉันตามมา $scope.$emitยื้อเหตุการณ์ขึ้นและ$scope.$broadcast- ลง แต่ทำไมไม่ใช้$rootScope.$broadcastเพื่อเข้าถึงผู้ฟังที่ตั้งใจไว้เสมอไป?

8
$ ดูวัตถุ
ฉันต้องการดูการเปลี่ยนแปลงในพจนานุกรม แต่ด้วยเหตุผลบางประการการโทรกลับไม่ได้รับการโทร นี่คือคอนโทรลเลอร์ที่ฉันใช้: function MyController($scope) { $scope.form = { name: 'my name', surname: 'surname' } $scope.$watch('form', function(newVal, oldVal){ console.log('changed'); }); } นี่คือไวโอลิน ฉันคาดว่าจะได้รับเงิน $ watchbackback ในการเปลี่ยนชื่อหรือนามสกุลทุกครั้ง แต่จะไม่เกิดขึ้น วิธีที่ถูกต้องในการทำคืออะไร?

7
วิธีการตั้งค่าแอตทริบิวต์ id ขององค์ประกอบ HTML แบบไดนามิกด้วย angularjs (1.x)?
ให้องค์ประกอบ HTML ประเภทdivวิธีการตั้งค่าของidคุณลักษณะซึ่งเป็นการเชื่อมต่อของตัวแปรขอบเขตและสตริง?

5
เมื่อเขียนคำสั่งใน AngularJS ฉันจะตัดสินใจได้อย่างไรว่าฉันไม่ต้องการขอบเขตใหม่ขอบเขตลูกใหม่หรือขอบเขตแยกใหม่
ฉันกำลังมองหาแนวทางบางอย่างที่สามารถใช้เพื่อช่วยกำหนดขอบเขตประเภทที่จะใช้เมื่อเขียนคำสั่งใหม่ โดยอุดมคติแล้วฉันต้องการบางสิ่งที่คล้ายกับผังงานที่นำฉันไปสู่คำถามมากมายและออกคำตอบที่ถูกต้อง - ไม่มีขอบเขตใหม่ใหม่ขอบเขตเด็กใหม่หรือขอบเขตแยกใหม่ - แต่มันน่าจะมากเกินไป นี่เป็นแนวทางเล็ก ๆ น้อย ๆ ของฉันในปัจจุบัน: อย่าใช้ขอบเขตแยกต่างหากหากองค์ประกอบที่จะใช้คำสั่งใช้ ng-model ดูฉันจะใช้ ng-model กับขอบเขตแยกได้หรือไม่? และ ทำไมตัวจัดรูปแบบไม่ทำงานกับขอบเขตที่แยกได้ หากคำสั่งไม่ได้แก้ไขคุณสมบัติขอบเขต / โมเดลอย่าสร้างขอบเขตใหม่ แยกขอบเขตดูเหมือนว่าจะทำงานได้ดีถ้าคำสั่งนั้นห่อหุ้มชุดขององค์ประกอบ DOM ( เอกสารระบุว่า "โครงสร้าง DOM ที่ซับซ้อน") และคำสั่งจะถูกใช้เป็นองค์ประกอบหรือไม่มีคำสั่งอื่นในองค์ประกอบเดียวกัน ฉันทราบว่าการใช้คำสั่งที่มีขอบเขตแยกบนองค์ประกอบบังคับให้คำสั่งอื่น ๆ ทั้งหมดในองค์ประกอบเดียวกันนั้นใช้ขอบเขตแยก (หนึ่ง) เดียวกันดังนั้นจึงไม่ จำกัด อย่างรุนแรงเมื่อใช้ขอบเขตแยกได้หรือไม่ ฉันหวังว่าบางอย่างจากทีม Angular-UI (หรืออื่น ๆ ที่เขียนคำสั่งมากมาย) สามารถแบ่งปันประสบการณ์ของพวกเขา โปรดอย่าเพิ่มคำตอบที่บอกว่า "ใช้ขอบเขตแยกสำหรับส่วนประกอบที่นำมาใช้ซ้ำได้"

8
ฉันจะใช้ $ rootScope ใน Angular เพื่อเก็บตัวแปรได้อย่างไร
ฉันจะใช้$rootScopeเพื่อเก็บตัวแปรในคอนโทรลเลอร์ที่ฉันต้องการเข้าถึงในคอนโทรลเลอร์อื่นได้อย่างไร? ตัวอย่างเช่น: angular.module('myApp').controller('myCtrl', function($scope) { var a = //something in the scope //put it in the root scope }); angular.module('myApp').controller('myCtrl2', function($scope) { var b = //get var a from root scope somehow //use var b }); ฉันจะทำสิ่งนี้ได้อย่างไร

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."); …

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
การส่งผ่านคำสั่งเชิงมุมเชิงมุมกับฟังก์ชันในนิพจน์ที่ระบุในแอตทริบิวต์ของคำสั่งสามารถทำได้หรือไม่?
ฉันมีคำสั่งแบบฟอร์มที่ใช้callbackคุณลักษณะที่ระบุกับขอบเขต isolate: scope: { callback: '&' } มันอยู่ภายในng-repeatดังนั้นการแสดงออกที่ฉันผ่านรวมถึงidวัตถุที่เป็นข้อโต้แย้งกับฟังก์ชั่นการโทรกลับ: <directive ng-repeat = "item in stuff" callback = "callback(item.id)"/> เมื่อฉันทำตามคำสั่งเสร็จแล้วจะเรียกใช้$scope.callback()จากฟังก์ชั่นควบคุม สำหรับกรณีส่วนใหญ่สิ่งนี้เป็นเรื่องปกติและทุกอย่างที่ฉันต้องการจะทำ แต่บางครั้งฉันก็ต้องการที่จะเพิ่มการโต้แย้งจากภายในdirectiveตัวเอง มีการแสดงออกเชิงมุมที่จะช่วยให้นี้: $scope.callback(arg2)ส่งผลให้callbackถูกเรียกด้วยarguments = [item.id, arg2]? ถ้าไม่เป็นเช่นนั้นวิธีที่ประณีตที่สุดในการทำเช่นนี้คืออะไร? ฉันพบว่าใช้งานได้: <directive ng-repeat = "item in stuff" callback = "callback" callback-arg="item.id"/> กับ scope { callback: '=', callbackArg: '=' } และคำสั่งโทร $scope.callback.apply(null, [$scope.callbackArg].concat([arg2, arg3]) ); …

10
Angularjs: 'controller as syntax' และ $ watch
วิธีสมัครรับข้อมูลการเปลี่ยนแปลงคุณสมบัติเมื่อใช้controller asไวยากรณ์ controller('TestCtrl', function ($scope) { this.name = 'Max'; this.changeName = function () { this.name = new Date(); } // not working $scope.$watch("name",function(value){ console.log(value) }); }); <div ng-controller="TestCtrl as test"> <input type="text" ng-model="test.name" /> <a ng-click="test.changeName()" href="#">Change Name</a> </div>

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