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

คำสั่ง AngularJS เป็นวิธีสอนเทคนิค HTML ใหม่ ๆ โดยขยายคำศัพท์ HTML คำสั่งอนุญาตให้คุณจัดการองค์ประกอบ DOM ในรูปแบบที่ประกาศซึ่งช่วยให้คุณพ้นจากภารกิจการจัดการ DOM ระดับต่ำ

2
รับองค์ประกอบดั้งเดิมจาก ng-click
ฉันมีรายการสิ่งของในมุมมองของฉันพร้อมng-clickแนบไว้กับพวกเขา: <ul id="team-filters"> <li ng-click="foo($event, team)" ng-repeat="team in teams"> <img src="{{team.logoSmall}}" alt="{{team.name}}" title="{{team.name}}"> </li> </ul> ฉันกำลังจัดการกับเหตุการณ์การคลิกในfooฟังก์ชั่นในคำสั่งของฉันผ่าน$eventการอ้างอิงไปยังวัตถุที่ถูกคลิก แต่ฉันได้รับการอ้างอิงถึงimgแท็กไม่ใช่liแท็ก ฉันต้องทำสิ่งนี้เพื่อรับli: $scope.foo = function($event, team) { var el = (function(){ if ($event.target.nodeName === 'IMG') { return angular.element($event.target).parent(); // get li } else { return angular.element($event.target); // is li } })(); มีวิธีง่ายๆในการรับการอ้างอิงองค์ประกอบที่ng-clickถูกผูกไว้โดยไม่ต้องดำเนินการ DOM ในคำสั่งของฉัน

3
JS เชิงมุม: อะไรคือความต้องการของฟังก์ชั่นลิงค์ของคำสั่งเมื่อเรามีคอนโทรลเลอร์ที่มีขอบเขตอยู่แล้ว?
ฉันจำเป็นต้องดำเนินการบางอย่างเกี่ยวกับขอบเขตและแม่แบบ ดูเหมือนว่าฉันสามารถทำได้ทั้งในlinkฟังก์ชั่นหรือcontrollerฟังก์ชั่น (เนื่องจากทั้งสองมีการเข้าถึงขอบเขต) เมื่อไรฉันจึงต้องใช้linkฟังก์ชั่นไม่ใช่คอนโทรลเลอร์? angular.module('myApp').directive('abc', function($timeout) { return { restrict: 'EA', replace: true, transclude: true, scope: true, link: function(scope, elem, attr) { /* link function */ }, controller: function($scope, $element) { /* controller function */ } }; } นอกจากนี้ฉันเข้าใจว่าlinkเป็นโลกที่ไม่ใช่เชิงมุม ดังนั้นฉันสามารถใช้$watch, และ$digest$apply อะไรคือความสำคัญของlinkฟังก์ชั่นเมื่อเรามีคอนโทรลเลอร์อยู่แล้ว?

7
เพิ่มคำสั่งจากคำสั่งใน AngularJS
ฉันกำลังพยายามสร้างคำสั่งที่ดูแลการเพิ่มคำสั่งเพิ่มเติมให้กับองค์ประกอบที่ประกาศไว้ ตัวอย่างเช่นผมต้องการที่จะสร้างคำสั่งที่จะดูแลของการเพิ่มdatepicker, และdatepicker-languageng-required="true" หากฉันพยายามเพิ่มคุณสมบัติเหล่านั้นและจากนั้นใช้$compileฉันเห็นได้ชัดว่าสร้างวงวนไม่สิ้นสุดดังนั้นฉันจึงตรวจสอบว่าฉันได้เพิ่มคุณสมบัติที่ต้องการแล้ว: angular.module('app') .directive('superDirective', function ($compile, $injector) { return { restrict: 'A', replace: true, link: function compile(scope, element, attrs) { if (element.attr('datepicker')) { // check return; } element.attr('datepicker', 'someValue'); element.attr('datepicker-language', 'en'); // some more $compile(element)(scope); } }; }); แน่นอนถ้าฉันไม่ได้$compileองค์ประกอบองค์ประกอบจะถูกตั้งค่า แต่คำสั่งจะไม่ถูก bootstrapped วิธีนี้ถูกต้องหรือฉันทำผิดหรือเปล่า? มีวิธีที่ดีกว่าเพื่อให้บรรลุพฤติกรรมเดียวกันหรือไม่ UDPATE : เนื่องจากความจริงที่ว่า$compileเป็นวิธีเดียวที่จะบรรลุเป้าหมายนี้มีวิธีข้ามการรวบรวมครั้งแรกหรือไม่ (องค์ประกอบอาจมีลูกหลายคน) อาจจะด้วยการตั้งค่าterminal:true? …

6
การทำความเข้าใจกับตัวเลือกรวมของข้อกำหนดคำสั่ง?
ฉันคิดว่านี่เป็นหนึ่งในแนวคิดที่ยากที่สุดสำหรับฉันที่จะเข้าใจด้วยคำสั่งของ angularjs เอกสารจากhttp://docs.angularjs.org/guide/directiveพูดว่า: transclude - รวบรวมเนื้อหาขององค์ประกอบและทำให้พร้อมใช้งานสำหรับคำสั่ง โดยทั่วไปใช้กับ ngTransclude ข้อดีของการถ่ายโอนข้อมูลคือฟังก์ชั่นการเชื่อมโยงได้รับฟังก์ชั่นการถ่ายโอนข้อมูลซึ่งถูก จำกัด ขอบเขตไว้ล่วงหน้าให้ถูกต้อง ในการตั้งค่าทั่วไปวิดเจ็ตจะสร้างขอบเขตไอโซเลต แต่การถ่ายโอนไม่ใช่ไม่ใช่เด็ก แต่เป็นพี่น้องของขอบเขตไอโซเลท สิ่งนี้ทำให้เป็นไปได้ที่วิดเจ็ตจะมีสถานะส่วนตัวและการรวมที่ถูกผูกไว้กับขอบเขตพาเรนต์ (pre-isolate) true - ไม่รวมเนื้อหาของคำสั่ง 'องค์ประกอบ' - รวมองค์ประกอบทั้งหมดรวมถึงคำสั่งใด ๆ ที่กำหนดไว้ที่ลำดับความสำคัญต่ำกว่า มันบอกว่ามักจะใช้กับtransclude ngTranscludeแต่ตัวอย่างจากเอกสารของngTranscludeไม่ได้ใช้ngTranscludeคำสั่งเลย ฉันต้องการตัวอย่างที่ดีเพื่อช่วยให้ฉันเข้าใจสิ่งนี้ ทำไมเราต้องการมัน? มันแก้ปัญหาอะไร วิธีใช้งาน

3
เมื่อใดจึงควรใช้องค์ประกอบ 'จริง' และยอดเยี่ยม transclude ในเชิงมุม
ฉันควรใช้transclude: 'true'เมื่อใดและเมื่อtransclude: 'element'ใด ฉันไม่สามารถหาอะไรเจอtransclude: 'element'ในเอกสารเชิงมุมพวกเขาค่อนข้างสับสน ฉันจะมีความสุขถ้าใครสามารถอธิบายสิ่งนี้ในภาษาที่เรียบง่าย ประโยชน์ของแต่ละตัวเลือกคืออะไร ความแตกต่างที่แท้จริงระหว่างพวกเขาคืออะไร? นี่คือสิ่งที่ฉันได้พบ: transclude: true ภายในฟังก์ชั่นการคอมไพล์คุณสามารถจัดการ DOM ด้วยความช่วยเหลือของ transclude ฟังก์ชั่นการเชื่อมโยงหรือคุณสามารถแทรก DOM transcluded ในเทมเพลตโดยใช้คำสั่ง ngTransclude บนแท็ก HTML ใด ๆ และ transclude: ‘element’ สิ่งนี้รวมองค์ประกอบทั้งหมดและฟังก์ชันเชื่อมโยง transclude ถูกนำมาใช้ในฟังก์ชั่นการคอมไพล์ คุณไม่สามารถเข้าถึงขอบเขตได้ที่นี่เนื่องจากยังไม่ได้สร้างขอบเขต ฟังก์ชั่นการคอมไพล์สร้างฟังก์ชั่นการเชื่อมโยงสำหรับคำสั่งที่มีการเข้าถึงขอบเขตและ transcludeFn ช่วยให้คุณสัมผัสองค์ประกอบโคลน (ซึ่งถูก transcluded) สำหรับการจัดการ DOM หรือใช้ข้อมูลที่ถูกผูกไว้กับขอบเขตในมัน สำหรับข้อมูลของคุณจะใช้ใน ng-repeat และ ng-switch

6
เทมเพลตไดนามิกคำสั่ง Angular.jsURL
ฉันมีแท็กที่กำหนดเองในrouteProviderแม่แบบที่เรียกใช้directiveแม่แบบ versionแอตทริบิวต์จะมีประชากรโดยขอบเขตซึ่งจากนั้นจะเรียกร้องให้แม่แบบที่เหมาะสม <hymn ver="before-{{ week }}-{{ day }}"></hymn> เพลงสวดมีหลายเวอร์ชั่นโดยยึดตามสัปดาห์และวันที่ ฉันคาดว่าจะใช้คำสั่งเพื่อเติม.htmlส่วนที่ถูกต้อง templateUrlตัวแปรไม่ได้ถูกอ่านโดย emanuel.directive('hymn', function() { var contentUrl; return { restrict: 'E', link: function(scope, element, attrs) { // concatenating the directory to the ver attr to select the correct excerpt for the day contentUrl = 'content/excerpts/hymn-' + attrs.ver + '.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]) ); …

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 การใช้"ขอบเขต: '>'"เป็นปัญหาในโครงการของฉันและได้รับการแก้ไขแล้ว


3
คำสั่ง AngularJS พร้อมตัวเลือกเริ่มต้น
ฉันเพิ่งเริ่มต้นด้วย angularjs และกำลังทำงานเพื่อแปลงปลั๊กอิน JQuery เก่าสองสามตัวเป็นแนวทางเชิงมุม ฉันต้องการกำหนดชุดตัวเลือกเริ่มต้นสำหรับคำสั่งของฉัน (องค์ประกอบ) ซึ่งสามารถแทนที่ได้โดยการระบุค่าตัวเลือกในแอตทริบิวต์ ฉันได้ดูวิธีที่คนอื่นทำเช่นนี้และในห้องสมุดเชิงมุม uiดูเหมือนว่าui.bootstrap.paginationจะทำสิ่งที่คล้ายกัน ก่อนอื่นตัวเลือกเริ่มต้นทั้งหมดจะถูกกำหนดไว้ในวัตถุคงที่: .constant('paginationConfig', { itemsPerPage: 10, boundaryLinks: false, ... }) จากนั้นgetAttributeValueฟังก์ชั่นยูทิลิตี้จะแนบกับตัวควบคุมคำสั่ง: this.getAttributeValue = function(attribute, defaultValue, interpolate) { return (angular.isDefined(attribute) ? (interpolate ? $interpolate(attribute)($scope.$parent) : $scope.$parent.$eval(attribute)) : defaultValue); }; ในที่สุดนี้จะใช้ในฟังก์ชั่นการเชื่อมโยงเพื่ออ่านในคุณลักษณะเป็น .directive('pagination', ['$parse', 'paginationConfig', function($parse, config) { ... controller: 'PaginationController', link: function(scope, element, …

3
$ เฝ้าดูการเปลี่ยนแปลงข้อมูลในคำสั่งเชิงมุม
ฉันจะทริกเกอร์$watchตัวแปรในคำสั่งเชิงมุมได้อย่างไรเมื่อจัดการข้อมูลภายใน (เช่นการแทรกหรือลบข้อมูล) แต่ไม่ได้กำหนดอ็อบเจกต์ใหม่ให้กับตัวแปรนั้น ฉันมีชุดข้อมูลง่ายๆที่กำลังโหลดจากไฟล์ JSON ตัวควบคุมเชิงมุมของฉันทำสิ่งนี้รวมทั้งกำหนดฟังก์ชันบางอย่าง: App.controller('AppCtrl', function AppCtrl($scope, JsonService) { // load the initial data model if (!$scope.data) { JsonService.getData(function(data) { $scope.data = data; $scope.records = data.children.length; }); } else { console.log("I have data already... " + $scope.data); } // adds a resource to the 'data' object $scope.add = …

12
ถ้าเส้นทาง ngSrc เปลี่ยนเป็น 404 มีวิธีเปลี่ยนกลับเป็นค่าเริ่มต้นหรือไม่?
แอปพลิเคชันที่ฉันกำลังสร้างต้องการให้ผู้ใช้ตั้งค่าข้อมูล 4 ชิ้นก่อนที่ภาพนี้จะมีโอกาสโหลดได้ รูปภาพนี้เป็นชิ้นส่วนกึ่งกลางของแอปพลิเคชันดังนั้นลิงก์รูปภาพที่เสียจึงทำให้ดูเหมือนว่าสิ่งทั้งหมดถูกบอร์ก ฉันต้องการให้มีภาพอื่นแทนบน 404 ความคิดใด ๆ ? ฉันต้องการหลีกเลี่ยงการเขียนคำสั่งที่กำหนดเองสำหรับสิ่งนี้ ฉันแปลกใจที่ไม่พบคำถามที่คล้ายกันโดยเฉพาะอย่างยิ่งเมื่อคำถามแรกในเอกสารเป็นคำถามเดียวกัน! http://docs.angularjs.org/api/ng.directive:ngSrc

1
ความหมายของ '=?' ใน angularJS directive แยกการประกาศขอบเขต?
เครื่องหมายคำถามหลังเท่ากับมีความหมายพิเศษหรือไม่? เช่น: scope: {foo: '=?'} ข้างต้นหมายความว่า 'ไม่เพิ่มข้อผิดพลาดถ้า' foo 'ไม่สามารถแก้ไขได้?

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 พร้อม templateUrl
ฉันมีคำสั่ง AngularJS ที่มีการtemplateUrlกำหนด ฉันกำลังพยายามทดสอบหน่วยกับจัสมิน JavaScript ของจัสมินของฉันมีลักษณะดังต่อไปนี้ตามคำแนะนำของสิ่งนี้ : describe('module: my.module', function () { beforeEach(module('my.module')); describe('my-directive directive', function () { var scope, $compile; beforeEach(inject(function (_$rootScope_, _$compile_, $injector) { scope = _$rootScope_; $compile = _$compile_; $httpBackend = $injector.get('$httpBackend'); $httpBackend.whenGET('path/to/template.html').passThrough(); })); describe('test', function () { var element; beforeEach(function () { element = $compile( '<my-directive></my-directive>')(scope); …

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