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

ฉันมีการป้อนข้อความ เมื่ออินพุตได้รับโฟกัสฉันต้องการเลือกข้อความภายในอินพุต ด้วย jQuery ฉันจะทำเช่นนี้: <input type="text" value="test" /> $("input[type=text]").click(function() { $(this).select(); // would select "test" in this example }); ฉันค้นหาไปรอบ ๆ เพื่อลองหาวิธีเชิงมุม แต่ตัวอย่างส่วนใหญ่ที่ฉันพบคือการจัดการกับคำสั่งที่กำลังดูคุณสมบัติโมดอลสำหรับการเปลี่ยนแปลง ฉันสมมติว่าฉันต้องการคำสั่งที่คอยดูอินพุตที่ได้รับโฟกัส ฉันจะทำอย่างไร

121 angularjs  angularjs-directive 

ฉันมีคำสั่งที่มีตัวควบคุมของตัวเอง ดูรหัสด้านล่าง: var popdown = angular.module('xModules',[]); popdown.directive('popdown', function () { var PopdownController = function ($scope) { this.scope = $scope; } PopdownController.prototype = { show:function (message, type) { this.scope.message = message; this.scope.type = type; }, hide:function () { this.scope.message = ''; this.scope.type = ''; } } var linkFn = function (scope, …

118 javascript  jquery  angularjs  angularjs-directive 

เมื่อใช้ Angularjs ฉันต้องแสดงหน้าจอโหลด (สปินเนอร์ธรรมดา) จนกว่าคำขอ ajax จะเสร็จสมบูรณ์ โปรดแนะนำแนวคิดใด ๆ ด้วยข้อมูลโค้ด

117 angularjs  angularjs-directive 

ฉันมีอินพุตที่กรองรายการ ng-repeat เกี่ยวกับการเปลี่ยนแปลง การทำซ้ำมีข้อมูลจำนวนมากและใช้เวลาสองสามวินาทีในการกรองทุกอย่าง ฉันต้องการให้พวกเขาหน่วงเวลา 0.5 วินาทีก่อนที่ฉันจะเริ่มกระบวนการกรอง อะไรคือวิธีที่ถูกต้องในเชิงมุมในการสร้างความล่าช้านี้? อินพุต <input ng-model="xyz" ng-change="FilterByName()" /> ทำซ้ำ <div ng-repeat"foo in bar"> <p>{{foo.bar}}</p> </div> ฟังก์ชั่นตัวกรอง $scope.FilterByName = function () { //Filtering Stuff Here }); ขอบคุณ

117 angularjs  angularjs-directive  angularjs-ng-repeat 

ฉันต้องการแก้ไขเล็กน้อยกับคำสั่งของบุคคลที่สาม (โดยเฉพาะAngular UI Bootstrap ) ฉันเพียงแค่ต้องการเพิ่มขอบเขตของpaneคำสั่ง: angular.module('ui.bootstrap.tabs', []) .controller('TabsController', ['$scope', '$element', function($scope, $element) { // various methods }]) .directive('tabs', function() { return { // etc... }; }) .directive('pane', ['$parse', function($parse) { return { require: '^tabs', restrict: 'EA', transclude: true, scope:{ heading:'@', disabled:'@' // <- ADDED SCOPE PROPERTY HERE }, link: …

114 javascript  angularjs  angularjs-directive  angular-ui-bootstrap  bower 

ฉันกำลังพยายามลบ jquery ออกจากแอพ Angular.js ของฉันเพื่อให้เบาลงและใส่ jqLite ของ Angular แทน แต่แอปใช้การค้นหา ('# id') และ find ('.classname') อย่างหนักซึ่ง jqLite ไม่รองรับมีเพียง 'ชื่อแท็ก' (ตามเอกสารประกอบ) สงสัยว่าอะไรคือวิธีที่ดีที่สุดในการเปลี่ยนแปลง แนวทางหนึ่งที่ฉันคิดคือสร้างแท็ก HTML ที่กำหนดเอง ตัวอย่างเช่นการเปลี่ยนแปลง <span class="btn btn-large" id="add-to-bag">Add to bag</span> ถึง <a2b style="display:none;"><span class="btn btn-large" >Add to bag</span></a2b> และ $element.find('#add-to-bag') ถึง $element.find('a2b') ความคิดใด ๆ ? ความคิดอื่น ๆ ? ขอบคุณ …

110 angularjs  angularjs-directive  jqlite 

ฉันต้องการสร้างคำสั่งที่เชื่อมโยงไปยังแอตทริบิวต์ แอตทริบิวต์ระบุฟังก์ชันที่ควรเรียกใช้ในขอบเขต แต่ฉันยังต้องการส่งอาร์กิวเมนต์ไปยังฟังก์ชันที่กำหนดภายในฟังก์ชันลิงก์ <div my-method='theMethodToBeCalled'></div> ในฟังก์ชันลิงค์ฉันเชื่อมโยงกับเหตุการณ์ jQuery ซึ่งส่งผ่านอาร์กิวเมนต์ที่ฉันต้องการส่งผ่านไปยังฟังก์ชัน: app.directive("myMethod",function($parse) { restrict:'A', link:function(scope,element,attrs) { var expressionHandler = $parse(attrs.myMethod); $(element).on('theEvent',function( e, rowid ) { id = // some function called to determine id based on rowid scope.$apply(function() {expressionHandler(id);}); } } } app.controller("myController",function($scope) { $scope.theMethodToBeCalled = function(id) { alert(id); }; } โดยไม่ต้องผ่าน id …

103 angularjs-directive 

ฉันมีคอนโทรลเลอร์สองตัวและแชร์ข้อมูลระหว่างกันด้วยฟังก์ชัน 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"> …

100 angularjs  angularjs-directive  angularjs-scope  angularjs-ng-repeat 

วิธีที่ง่ายที่สุดในการส่งผ่านตัวแปรขอบเขต AngularJS จากคำสั่งไปยังคอนโทรลเลอร์คืออะไร ตัวอย่างทั้งหมดที่ฉันเห็นดูซับซ้อนมากไม่มีวิธีใดที่ฉันสามารถเข้าถึงคอนโทรลเลอร์จากคำสั่งและตั้งค่าตัวแปรขอบเขตได้หรือไม่?

99 angularjs  angularjs-directive  ng-controller 

หากฉันมีคำสั่งที่ตอบสนองต่อสถานะของแอตทริบิวต์เฉพาะในขอบเขตและฉันต้องการเปลี่ยนแอตทริบิวต์นั้นในการทดสอบของฉันและตรวจสอบว่าแอตทริบิวต์นั้นตอบสนองอย่างถูกต้องวิธีใดที่ดีที่สุดในการเปลี่ยนแปลงนั้น ฉันเคยเห็นทั้งสองรูปแบบนี้: scope.$apply(function() { scope.myAttribute = true; }); และ scope.myAttribute = true; scope.$digest(); อะไรคือความแตกต่างระหว่างสิ่งที่ดีกว่าและทำไม

98 angularjs  angularjs-directive 

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

95 angularjs  angularjs-directive 

ฉันมีคำสั่งที่มีขอบเขตแยก (เพื่อให้ฉันสามารถใช้คำสั่งซ้ำในที่อื่น ๆ ได้) และเมื่อฉันใช้คำสั่งนี้กับ 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 สามารถทราบได้หรือไม่ว่าใช้ขอบเขตประเภทใด?

95 angularjs  angularjs-directive  angularjs-scope  angularjs-ng-repeat 

ดูเหมือนฉันจะไม่พบวิธีเรียกใช้ฟังก์ชันในขอบเขตหลักจากภายในคำสั่งโดยไม่ใช้ขอบเขตแยก ฉันรู้ว่าถ้าฉันใช้ขอบเขตแยกฉันสามารถใช้ "&" ในการแยกเพื่อเข้าถึงฟังก์ชันในขอบเขตหลัก แต่การใช้ขอบเขตที่แยกเมื่อไม่จำเป็นจะมีผล พิจารณา 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) { …

95 angularjs  angularjs-directive  angularjs-scope 

เทมเพลต 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). …

95 angularjs  angularjs-directive 

ฉันไม่ค่อยเข้าใจว่าควรใช้คำสั่งเมื่อใดและเมื่อใดจึงจะเหมาะสมกว่าที่จะใช้ nginclude ลองดูตัวอย่างนี้: ฉันมีบางส่วนpassword-and-confirm-input-fields.htmlนั่นคือ html สำหรับป้อนและยืนยันรหัสผ่าน ฉันใช้ทั้งในหน้าสมัครและภายใต้หน้าการเปลี่ยนแปลงรหัสผ่าน ทั้งสองเพจมีคอนโทรลเลอร์แต่ละหน้า html บางส่วนไม่มีคอนโทรลเลอร์เฉพาะ ฉันควรใช้คำสั่งหรือngIncludeเพื่อสิ่งนี้?

93 angularjs  angularjs-directive  angularjs-ng-include