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

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

1067 angularjs  angularjs-directive  angularjs-scope  isolated-scope 

'วิธีเชิงมุม' เพื่อกำหนดโฟกัสไปที่ฟิลด์อินพุตใน AngularJS คืออะไร ข้อกำหนดเฉพาะเพิ่มเติม: เมื่อModalเปิดขึ้นให้ตั้งค่าโฟกัสที่กำหนดไว้ล่วงหน้า<input>ภายใน Modal นี้ ทุกครั้งที่<input>มองเห็นได้ (เช่นโดยคลิกปุ่มบางปุ่ม) ตั้งโฟกัสไว้ ฉันพยายามทำตามข้อกำหนดแรกด้วยautofocusแต่วิธีนี้จะใช้ได้เฉพาะเมื่อ Modal เปิดขึ้นเป็นครั้งแรกและเฉพาะในเบราว์เซอร์บางตัวเท่านั้น (เช่นใน Firefox จะไม่ทำงาน) ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชม.

759 angularjs  angularjs-directive 

เมื่อคุณสร้างคำสั่งคุณสามารถใส่รหัสลงในคอมไพเลอร์ฟังก์ชั่นลิงค์หรือตัวควบคุม ในเอกสารพวกเขาอธิบายว่า: รวบรวมและฟังก์ชั่นการเชื่อมโยงจะใช้ในขั้นตอนต่าง ๆ ของวงจรเชิงมุม ตัวควบคุมจะใช้ร่วมกันระหว่างคำสั่ง อย่างไรก็ตามสำหรับฉันมันยังไม่ชัดเจนรหัสประเภทไหนควรไปที่ไหน เช่น: ฉันสามารถสร้างฟังก์ชั่นในการคอมไพล์และแนบกับขอบเขตในลิงค์หรือแนบฟังก์ชั่นเข้ากับขอบเขตในคอนโทรลเลอร์ได้หรือไม่? คอนโทรลเลอร์มีการใช้งานร่วมกันอย่างไรระหว่างคำสั่งหากแต่ละคำสั่งสามารถมีตัวควบคุมได้? คอนโทรลเลอร์ใช้งานร่วมกันจริง ๆ หรือเป็นเพียงคุณสมบัติขอบเขตหรือไม่

529 angularjs  angularjs-directive 

ฉันเข้าใจng-showและng-hideส่งผลต่อคลาสที่ตั้งค่าไว้บนองค์ประกอบและng-ifควบคุมว่าจะให้องค์ประกอบแสดงผลเป็นส่วนหนึ่งของ DOM หรือไม่ จะมีแนวทางในการเลือกng-ifมากกว่าng-show/ ng-hideหรือในทางกลับกัน?

516 angularjs  angularjs-directive 

ปิด. คำถามนี้ไม่เป็นไปตามหลักเกณฑ์กองมากเกิน ไม่ยอมรับคำตอบในขณะนี้ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เป็นไปตามหัวข้อสำหรับ Stack Overflow ปิดให้บริการใน5 ปีที่ผ่านมา เมื่อเขียนคำสั่งเชิงมุมคุณสามารถใช้ฟังก์ชันใด ๆ ต่อไปนี้เพื่อจัดการพฤติกรรม DOM เนื้อหาและรูปลักษณ์ขององค์ประกอบที่ประกาศคำสั่ง: รวบรวม ตัวควบคุม ก่อนการเชื่อมโยง โพสต์ลิงก์ ดูเหมือนจะมีความสับสนว่าฟังก์ชั่นใดที่ควรใช้ คำถามนี้ครอบคลุม: คำสั่งพื้นฐาน จะประกาศฟังก์ชั่นต่าง ๆ ได้อย่างไร? ความแตกต่างระหว่างแม่แบบแหล่งที่มาและแม่แบบอินสแตนซ์คืออะไร? ลำดับใดที่สั่งการทำงานของคำสั่ง? เกิดอะไรขึ้นระหว่างการเรียกใช้ฟังก์ชันเหล่านี้ ฟังก์ชั่นธรรมชาติสิ่งที่ต้องทำและสิ่งที่ไม่ควรทำ รวบรวม ตัวควบคุม Pre-การเชื่อมโยง โพสต์ลิงค์ คำถามที่เกี่ยวข้อง: Directive: การเชื่อมโยง VS รวบรวม VS ควบคุม ความแตกต่างระหว่าง 'ควบคุม', 'เชื่อมโยง' และ 'รวบรวม' ฟังก์ชั่นเมื่อกำหนดคำสั่ง ความแตกต่างระหว่างรวบรวมและฟังก์ชั่นการเชื่อมโยงใน angularjsคืออะไร ความแตกต่างระหว่างองค์ประกอบก่อนการคอมไพล์และโพสต์การคอมไพล์ในคำสั่ง AngularJS? . …

451 angularjs  angularjs-directive 

ฉันต้องการจับกิจกรรมการกดปุ่มบนกล่องข้อความด้านล่าง เพื่อให้ชัดเจนยิ่งขึ้นฉันใช้ a ng-repeatเพื่อเติม tbody นี่คือ HTML: <td><input type="number" id="closeqty{{$index}}" class="pagination-right closefield" data-ng-model="closeqtymodel" data-ng-change="change($index)" required placeholder="{{item.closeMeasure}}" /></td> นี่คือโมดูลของฉัน: angular.module('components', ['ngResource']); ฉันกำลังใช้ทรัพยากรเพื่อเติมข้อมูลตารางและรหัสคอนโทรลเลอร์ของฉันคือ: function Ajaxy($scope, $resource) { //controller which has resource to populate the table }

410 angularjs  angularjs-directive  angular-ui 

ฉันกำลังมองหาวิธีการเข้าถึงขอบเขต "หลัก" ใด ๆ ภายในคำสั่ง การรวมกันของขอบเขต, transclude, ต้อง, ผ่านในตัวแปร (หรือขอบเขตของตัวเอง) จากด้านบน ฯลฯ ฉันยินดีที่จะโค้งไปข้างหลังทั้งหมด แต่ฉันต้องการที่จะหลีกเลี่ยงบางสิ่งบางอย่างโดยสิ้นเชิงแฮ็คหรือ unmaintainable ตัวอย่างเช่นฉันรู้ว่าฉันสามารถทำได้ทันทีโดยรับ$scopeจากพารามิเตอร์ preLink และวนซ้ำตาม$siblingขอบเขตเพื่อค้นหาแนวคิด "หลัก" สิ่งที่ฉันต้องการคือการสามารถ$watchแสดงออกในขอบเขตผู้ปกครอง หากฉันสามารถทำสิ่งนั้นได้ฉันก็สามารถทำสิ่งที่ฉันพยายามทำที่นี่ได้: AngularJS - การสร้างตัวแปรบางส่วนด้วยวิธีการได้อย่างไร? หมายเหตุสำคัญคือคำสั่งนั้นจะต้องสามารถใช้งานได้อีกครั้งภายในขอบเขตหลักเดียวกัน ดังนั้นพฤติกรรมเริ่มต้น (ขอบเขต: false) จึงไม่ทำงานสำหรับฉัน ฉันต้องการแต่ละขอบเขตต่ออินสแตนซ์ของคำสั่งและจากนั้นฉันต้องการ$watchตัวแปรที่อยู่ในขอบเขตพาเรนต์ ตัวอย่างโค้ดมีค่า 1,000 คำดังนั้น: app.directive('watchingMyParentScope', function() { return { require: /* ? */, scope: /* ? */, transclude: /* ? */, …

327 angularjs  angularjs-directive 

หากฉันมี navbar ใน bootstrap กับรายการ Home | About | Contact ฉันจะตั้งค่าคลาสที่แอ็คทีฟสำหรับแต่ละไอเท็มเมนูได้อย่างไรเมื่อแอ็คทีฟ? นั่นคือฉันจะตั้งได้อย่างไรclass="active"เมื่อเส้นทางเชิงมุมอยู่ที่ #/ สำหรับบ้าน #/about สำหรับหน้าเกี่ยวกับ #/contact สำหรับหน้าติดต่อ

306 javascript  twitter-bootstrap  angularjs  angularjs-directive  navbar 

ฉันมีคำสั่งนี่คือรหัส: .directive('map', function() { return { restrict: 'E', replace: true, template: '<div></div>', link: function($scope, element, attrs) { var center = new google.maps.LatLng(50.1, 14.4); $scope.map_options = { zoom: 14, center: center, mapTypeId: google.maps.MapTypeId.ROADMAP }; // create map var map = new google.maps.Map(document.getElementById(attrs.id), $scope.map_options); var dirService= new google.maps.DirectionsService(); var dirRenderer= new google.maps.DirectionsRenderer() …

297 angularjs  angularjs-directive 

ฉันต้องสามารถเพิ่มตัวอย่างเช่น "contenteditable" เพื่อองค์ประกอบขึ้นอยู่กับตัวแปรบูลีนในขอบเขต ตัวอย่างการใช้: <h1 attrs="{'contenteditable=\"true\"': editMode}">{{content.title}}</h1> จะส่งผลให้ contenteditable = true ถูกเพิ่มเข้ากับองค์ประกอบหาก$scope.editModeถูกตั้งค่าเป็นtrueถูกกำหนดให้มีวิธีง่าย ๆ ในการใช้ ng-class เช่นลักษณะการทำงานของคุณลักษณะ? ฉันกำลังพิจารณาที่จะเขียนคำสั่งและการแบ่งปันหากไม่ได้ แก้ไข: ฉันเห็นว่ามีความคล้ายคลึงกันระหว่างคำสั่ง attrs ที่ฉันเสนอกับng-bind-attrs แต่มันถูกลบใน 1.0.0.rc3ทำไม?

296 angularjs  angularjs-directive 

ฉันกำลังจัดการปัญหาของฉันเช่นนี้: ng-style="{ width: getTheValue() }" แต่เพื่อหลีกเลี่ยงการมีฟังก์ชั่นนี้ที่ด้านควบคุมฉันอยากทำอะไรแบบนี้: ng-style="{ width: myObject.value == 'ok' ? '100%' : '0%' }" ฉันจะทำสิ่งนี้ได้อย่างไร

267 angularjs  angularjs-directive 

ฉันได้เห็นคำถามจำนวนหนึ่งเกี่ยวกับ StackOverflow ที่พูดถึง ng-transclude แต่ไม่มีใครอธิบายในแง่ของคนธรรมดาว่ามันคืออะไร คำอธิบายในเอกสารประกอบมีดังนี้: คำสั่งที่ทำเครื่องหมายจุดแทรกสำหรับ DOM transcluded ของคำสั่งหลักที่ใกล้ที่สุดที่ใช้การรวมข้อมูล นี่ค่อนข้างสับสน มีใครบ้างที่สามารถอธิบายในศัพท์ง่ายๆว่าตั้งใจจะทำอะไรและใช้ที่ใด

266 angularjs  angularjs-directive  transclusion 

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

265 angularjs  angularjs-directive  angularjs-scope 

ฉันกำลังพยายามตั้งค่าsrcคุณลักษณะของ iframe จากตัวแปรและไม่สามารถใช้งานได้ ... มาร์กอัป: <div class="col-xs-12" ng-controller="AppCtrl"> <ul class=""> <li ng-repeat="project in projects"> <a ng-click="setProject(project.id)" href="">{{project.url}}</a> </li> </ul> <iframe ng-src="{{trustSrc(currentProject.url)}}"> Something wrong... </iframe> </div> ควบคุม / app.js: function AppCtrl ($scope) { $scope.projects = { 1 : { "id" : 1, "name" : "Mela Sarkar", "url" : "http://blabla.com", "description" : …

214 javascript  html  angularjs  iframe  angularjs-directive 

ฉันมีเวอร์ชันที่ลวกมากของสิ่งที่ฉันทำซึ่งทำให้เกิดปัญหาข้าม directiveฉันมีความเรียบง่าย เมื่อใดก็ตามที่คุณคลิกองค์ประกอบมันจะเพิ่มองค์ประกอบอื่น อย่างไรก็ตามจะต้องรวบรวมก่อนเพื่อให้สามารถแสดงได้อย่างถูกต้อง $compileงานวิจัยของฉันทำให้ฉัน แต่ตัวอย่างทั้งหมดใช้โครงสร้างที่ซับซ้อนซึ่งฉันไม่รู้วิธีสมัครที่นี่จริง ๆ Fiddles อยู่ที่นี่: http://jsfiddle.net/paulocoelho/fBjbP/1/ และ JS อยู่ที่นี่: var module = angular.module('testApp', []) .directive('test', function () { return { restrict: 'E', template: '<p>{{text}}</p>', scope: { text: '@text' }, link:function(scope,element){ $( element ).click(function(){ // TODO: This does not do what it's supposed to :( $(this).parent().append("<test text='n'></test>"); …

212 angularjs  angularjs-directive  dynamically-generated