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

AngularJS ช่วยด้วยการตั้งค่าactiveคลาสบนลิงค์สำหรับหน้าปัจจุบันหรือไม่? ฉันคิดว่ามันมีวิธีที่น่าอัศจรรย์ แต่ฉันก็หาไม่เจอ เมนูของฉันดูเหมือนว่า: <ul> <li><a class="active" href="/tasks">Tasks</a> <li><a href="/actions">Tasks</a> </ul> และฉันมีตัวควบคุมสำหรับแต่ละของพวกเขาในเส้นทางของเราและTasksControllerActionsController แต่ฉันไม่สามารถหาวิธีผูกคลาส "แอคทีฟ" บนaลิงก์ไปยังตัวควบคุมได้ คำใบ้ใด ๆ

205 angularjs 

ฉันมีรายการสิ่งของในมุมมองของฉันพร้อม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 ในคำสั่งของฉัน

204 angularjs  angularjs-directive 

เรากำลังดูตัวเลือกในการสร้างส่วนหน้าของแอปพลิเคชันที่เรากำลังสร้างและพยายามประเมินเครื่องมือที่จะทำงานให้เราและให้แพลตฟอร์มที่ดีที่สุดแก่เราในการก้าวไปข้างหน้า นี่เป็นโครงการNode.js แผนเริ่มต้นของเราคือการใช้ Express และไปตามเส้นทางนั้น แต่เราตัดสินใจว่าก่อนที่เราจะเริ่มขั้นตอนนี้เราควรตรวจสอบสิ่งที่อยู่ข้างนอก แอปพลิเคชันของเรามีหลายพื้นที่ซึ่งเราไม่เชื่อว่าเหมาะสมกับรูปแบบหน้าเดียวที่เกี่ยวข้องกับมุมมองของแอปพลิเคชัน แต่ไม่ใช่จากมุมมอง เราได้เห็นกรอบบางอย่างที่เราสามารถใช้เพื่อสร้างลูกค้าเช่นBackbone.js , Meteorและอื่น ๆ รวมถึง AngularJS นี่อาจเป็นคำถามที่ค่อนข้างชัดเจน แต่เราไม่สามารถถอดรหัสได้หาก AngularJS นั้นใช้สำหรับแอปพลิเคชันหน้าเดียวหรือสามารถใช้กับแอปพลิเคชันที่มีหลายหน้าเช่น Express ได้ อัปเดต 17 กรกฎาคม 2556 เพียงเพื่อให้ผู้คนในวงฉันจะปรับปรุงคำถามนี้เมื่อเราผ่านกระบวนการ ตอนนี้เรากำลังจะสร้างทุกอย่างร่วมกันและเราจะเห็นว่าประสิทธิภาพนั้นดีแค่ไหน เราได้ติดต่อกับบางคนที่มีคุณสมบัติตรงกับ AngularJS มากกว่าเราและตั้งคำถามเกี่ยวกับการแยกแอปพลิเคชันขนาดใหญ่ที่แบ่งปันบริบท แต่อาจมีขนาดใหญ่เกินไปที่จะทำงานในหน้าเดียว ฉันทามติคือเราสามารถให้บริการหน้าคงที่หลายหน้าและสร้างแอปพลิเคชัน AngularJS ที่ทำงานกับหน้าเหล่านั้นเท่านั้นสร้างคอลเลกชันของ SPA อย่างมีประสิทธิภาพและเชื่อมโยงแอปพลิเคชันเหล่านั้นเข้าด้วยกันโดยใช้การเชื่อมโยงมาตรฐาน ตอนนี้กรณีการใช้งานของเรานั้นเฉพาะเจาะจงมากเพราะโซลูชันของเรามีหลายแอปพลิเคชันและอย่างที่ฉันบอกว่าเราจะลองใช้รหัสฐานเดียวก่อนและปรับให้เหมาะสมจากตรงนั้น อัปเดต 18 มิถุนายน 2559โครงการพังหน้าผาดังนั้นเราไม่เคยมีรอบที่จะทำอะไรมากเกินไป เราได้หยิบมันขึ้นมาอีกครั้งเมื่อไม่นานมานี้ แต่ไม่ได้ใช้แองกูลาร์และใช้การตอบโต้แทน เรายังคงใช้สถาปัตยกรรมที่ระบุไว้ในการอัปเดตก่อนหน้านี้ที่เราใช้แอปด่วนและตนเองมีแอพดังนั้นเราจึงมี/chatเส้นทางด่วนที่ให้บริการแอปแชทปฏิกิริยาของเราเรามีเส้นทางอื่น/projectsที่ให้บริการแอปโครงการและ เป็นต้น วิธีที่เรามองมันคือแต่ละแอพเป็นรูทรวมในแง่ของชุดคุณสมบัติของมันมันจะต้องสามารถใช้งานแบบสแตนด์อโลนเพื่อที่จะได้รับการพิจารณาแอพในตัวเอง ในทางเทคนิคแล้วข้อมูลทั้งหมดนั้นอยู่ที่นั่นเพียงแค่พื้นฐานด่วนและรสชาติของแอปฝั่งไคลเอ็นต์ที่สร้างคุณงามความดีที่คุณต้องการใช้

201 javascript  node.js  angularjs 

https://docs.angularjs.org/guide/directive โดยการฟังเหตุการณ์นี้คุณสามารถลบผู้ฟังเหตุการณ์ที่อาจทำให้เกิดการรั่วไหลของหน่วยความจำ ผู้ฟังที่ลงทะเบียนกับขอบเขตและองค์ประกอบจะถูกล้างข้อมูลโดยอัตโนมัติเมื่อพวกเขาถูกทำลาย แต่ถ้าคุณลงทะเบียนผู้ฟังในบริการหรือลงทะเบียนผู้ฟังบนโหนด DOM ที่ไม่ได้ถูกลบคุณจะต้องล้างมันเองหรือ คุณเสี่ยงต่อการรั่วไหลของหน่วยความจำ การปฏิบัติที่ดีที่สุด: คำสั่งควรล้างหลังจากตัวเอง คุณสามารถใช้ element.on ('$ destroy', ... ) หรือขอบเขต $ on ('$ destroy', ... ) เพื่อเรียกใช้ฟังก์ชันล้างข้อมูลเมื่อลบคำสั่ง คำถาม: ฉันมีelement.on "click", (event) ->คำสั่งภายใน: เมื่อคำสั่งถูกทำลายมีหน่วยความจำอ้างอิงถึงelement.onเพื่อป้องกันไม่ให้ถูกเก็บขยะหรือไม่ เอกสารเชิงมุมระบุว่าฉันควรใช้ตัวจัดการเพื่อลบตัวรับฟังเหตุการณ์ใน$destroyเหตุการณ์ที่ปล่อยออกมา ฉันอยู่ภายใต้การแสดงผลที่destroy()ลบผู้ฟังกิจกรรมออกใช่ไหม

200 angularjs  memory-leaks 

ซอร์สโค้ด HTML <div ng-app=""> <div ng-controller="test"> <div ng-address-bar browser="html5"></div> <br><br> $location.url() = {{$location.url()}}<br> $location.search() = {{$location.search('keyword')}}<br> $location.hash() = {{$location.hash()}}<br> keyword valus is={{loc}} and ={{loc1}} </div> </div> รหัสแหล่ง AngularJS <script> function test($scope, $location) { $scope.$location = $location; $scope.ur = $scope.$location.url('www.html.com/x.html?keyword=test#/x/u'); $scope.loc1 = $scope.$location.search().keyword ; if($location.url().indexOf('keyword') > -1){ $scope.loc= $location.url().split('=')[1]; $scope.loc = …

199 javascript  angularjs  routeparams 

ฉันมีฟังก์ชั่นเชิงมุมต่อไปนี้: $scope.updateStatus = function(user) { $http({ url: user.update_path, method: "POST", data: {user_id: user.id, draft: true} }); }; แต่เมื่อใดก็ตามที่เรียกใช้ฟังก์ชั่นนี้ฉันจะได้รับReferenceError: $http is not definedในคอนโซลของฉัน ใครช่วยฉันเข้าใจสิ่งที่ฉันทำผิดที่นี่?

199 angularjs  javascript-framework  angular-http 

ฉันมีปัญหาผูกปุ่มเรดิโอกับวัตถุที่คุณสมบัติมีค่าบูลีน ฉันพยายามแสดงคำถามการสอบที่ดึงมาจากทรัพยากร $ HTML: <label data-ng-repeat="choice in question.choices"> <input type="radio" name="response" data-ng-model="choice.isUserAnswer" value="true" /> {{choice.text}} </label> JS: $scope.question = { questionText: "This is a test question.", choices: [{ id: 1, text: "Choice 1", isUserAnswer: false }, { id: 2, text: "Choice 2", isUserAnswer: true }, { id: 3, text: "Choice …

199 angularjs  data-binding  model  radio 

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

199 javascript  angularjs  angularjs-directive 

ใครช่วยอธิบายให้ชัดเจนว่าวงจรชีวิตของคอนโทรลเลอร์ AngularJS คืออะไร เป็นตัวควบคุมเดี่ยวหรือสร้าง / ทำลายตามความต้องการ? หากหลังสิ่งที่ก่อให้เกิดการสร้าง / ทำลายของตัวควบคุมคืออะไร? ลองพิจารณาตัวอย่างด้านล่าง: var demoApp = angular.module('demo') .config(function($routeProvider, $locationProvider) { $routeProvider .when('/home', {templateUrl: '/home.html', controller: 'HomeCtrl'}) .when('/users',{templateUrl: '/users.html', controller: 'UsersCtrl'}) .when('/users/:userId', {templateUrl: '/userEditor.html', controller: 'UserEditorCtrl'}); }); demoApp.controller('UserEditorCtrl', function($scope, $routeParams, UserResource) { $scope.user = UserResource.get({id: $routeParams.userId}); }); เช่น: ในตัวอย่างข้างต้นเมื่อฉันนำทางไปยัง/users/1ผู้ใช้ 1 $scopeมีการโหลดและการตั้งค่าไป จากนั้นเมื่อฉันนำทางไปยัง/users/2ผู้ใช้ 2 ถูกโหลด …

199 javascript  angularjs 

อย่างที่คุณทราบทั้งเชิงมุมและกิ่งไม้มีโครงสร้างควบคุมร่วมกัน - วงเล็บปีกกาคู่ ฉันจะเปลี่ยนค่าเริ่มต้นของ Angular ได้อย่างไร ฉันรู้ว่าฉันสามารถทำได้ใน Twig แต่ในบางโครงการฉันทำไม่ได้มีเพียง JS

198 angularjs  twig 

ภายในโมดูลคอนโทรลเลอร์สามารถสืบทอดคุณสมบัติจากคอนโทรลเลอร์ภายนอก: var app = angular.module('angularjs-starter', []); var ParentCtrl = function ($scope, $location) { }; app.controller('ChildCtrl', function($scope, $injector) { $injector.invoke(ParentCtrl, this, {$scope: $scope}); }); ตัวอย่างผ่าน: Dead link : http://blog.omkarpatil.com/2013/02/controller-inheritance-in-angularjs.html สามารถควบคุมภายในโมดูลรับจากพี่น้อง? var app = angular.module('angularjs-starter', []); app.controller('ParentCtrl ', function($scope) { //I'm the sibling, but want to act as parent }); app.controller('ChildCtrl', function($scope, …

198 angularjs  inheritance  angularjs-controller 

ฉันกำลังพยายามสร้างคำสั่งที่ดูแลการเพิ่มคำสั่งเพิ่มเติมให้กับองค์ประกอบที่ประกาศไว้ ตัวอย่างเช่นผมต้องการที่จะสร้างคำสั่งที่จะดูแลของการเพิ่ม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? …

197 javascript  angularjs  model-view-controller  mvvm  angularjs-directive 

ที่หน้าAngular-UI-Bootstrapบน cdnjs ถูกกล่าวว่า: Native AngularJS (Angular) สั่งให้ Bootstrap ของ Twitter รอยเท้าขนาดเล็ก (5 kB gzipped!) ไม่จำเป็นต้องพึ่งพา JavaScript บุคคลที่สาม (jQuery, Bootstrap JavaScript)! ... และมีตัวเลือกสำหรับ //cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap-tpls.min.js และ //cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap.min.js การกระจายสิ่งเหล่านี้แสดงให้เห็นถึงความแตกต่างเล็กน้อยและฉันไม่สามารถหาเอกสารใด ๆ เกี่ยวกับมัน ... เรื่องสั้นสั้นใช้ tpls เว้นแต่ว่าคุณกำลังจะสร้างเทมเพลตที่กำหนดเอง มีการบันทึกไว้ที่นี่: github.com/angular-ui/bootstrap/tree/gh-pages#build-files (เชื่อมโยงจากหน้าแรกเช่นกัน) ในระยะสั้นรุ่น -tpls มีแม่แบบ Bootstrap เริ่มต้นรวม ไม่ว่าในกรณีใด ๆ คุณควรรวมไฟล์ที่ระบุไว้เพียงไฟล์เดียวเท่านั้น - ขอบคุณ pkozlowski.opensource

196 angularjs  angular-ui  angular-ui-bootstrap 

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

195 angularjs  angularjs-directive 

ใช้ Angular และ Phonegap ฉันพยายามโหลดวิดีโอที่อยู่บนเซิร์ฟเวอร์ระยะไกล แต่เจอปัญหา ใน JSON ของฉัน URL ถูกป้อนเป็น URL HTTP ธรรมดา "src" : "http://www.somesite.com/myvideo.mp4" เทมเพลตวิดีโอของฉัน <video controls poster="img/poster.png"> <source ng-src="{{object.src}}" type="video/mp4"/> </video> ข้อมูลอื่น ๆ ทั้งหมดของฉันถูกโหลด แต่เมื่อฉันดูคอนโซลของฉันฉันได้รับข้อผิดพลาดนี้: Error: [$interpolate:interr] Can't interpolate: {{object.src}} Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy. URL ฉันลองเพิ่มการ$compileProviderตั้งค่าคอนฟิกแล้ว แต่ไม่สามารถแก้ไขปัญหาได้ $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/); …

195 javascript  angularjs  cordova