728x90
반응형

AngularJS 23

AngularJS 컨트롤러의 'this'vs $ scope

질문 : AngularJS 컨트롤러의 'this'vs $ scope AngularJS 홈페이지의 "Create Components"섹션에 다음 예제가 있습니다. 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); } } 어떻게 '공지 사항 sel..

AngularJS의 ng-options에서 값 속성을 설정하는 방법

질문 : AngularJS의 ng-options에서 값 속성을 어떻게 설정합니까? (나를 포함하여) 많은 사람들을 괴롭히는 것 같습니다. ng-options 태그에 대한 옵션을 채울 때 옵션 값을 설정하는 방법을 알 수 없습니다. 이것에 대한 문서는 정말 불분명합니다-적어도 저와 같은 멍청이에게는. 옵션에 대한 텍스트를 다음과 같이 쉽게 설정할 수 있습니다. ng-options="select p.text for p in resultOptions" resultOptions 가 다음과 같은 경우 : [ { "value": 1, "text": "1st" }, { "value": 2, "text": "2nd" } ] 옵션 값을 설정하는 것이 가장 간단해야하지만 지금까지는 이해하지 못했습니다. 답변 ngOptio..

AngularJS가 select에 빈 옵션을 포함하는 이유

질문 : AngularJS가 select에 빈 옵션을 포함하는 이유는 무엇입니까? 저는 지난 몇 주 동안 AngularJS와 함께 일해 왔으며 실제로 나를 괴롭히는 것은 http://docs.angularjs.org/api/ng의 사양에 정의 된 모든 순열 또는 구성을 시도한 후에도 .directive : select , 여전히 선택 요소의 첫 번째 자식으로 빈 옵션이 표시됩니다. 비취는 다음과 같습니다. select.span9(ng-model='form.type', required, ng-options='option.value as option.name for option in typeOptions'); 여기 컨트롤러 : $scope.typeOptions = [ { name: 'Feature', val..

AngularJS 1.2 $ injector : modulerr

질문 : AngularJS 1.2 $ injector : modulerr 1.07 대신 angular 1.2를 사용할 때 다음 코드가 더 이상 유효하지 않습니다. 왜 그런가요? 'use strict'; var app = angular.module('myapp', []); app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { $locationProvider.html5Mode(true); $routeProvider. when('/', { templateUrl: 'part.html', controller: 'MyCtrl' }). otherwise({ redirectTo: '/' }); } ]..

AngularJS 템플릿의 if else 문

질문 : AngularJS 템플릿의 if else 문 AngularJS 템플릿에서 조건을 만들고 싶습니다. Youtube API에서 동영상 목록을 가져옵니다. 비디오 중 일부는 16 : 9 비율이고 일부는 4 : 3 비율입니다. 다음과 같은 조건을 만들고 싶습니다. if video.yt$aspectRatio equals widescreen then element's attr height="270px" else element's attr height="360px" ng-repeat 사용하여 동영상을 반복하고 있습니다. 이 상태에 대해 어떻게해야할지 모르겠습니다. 범위에 함수를 추가 하시겠습니까? 템플릿에서 수행합니까? 답변 Angularjs (1.1.5 이하 버전)는 if/else 기능을 제공하지 않습니다..

AngularJS ngClass 조건부

질문 : AngularJS ngClass 조건부 ng-class 와 같은 것을 조건부로 표현하는 방법이 있습니까? 예를 들어, 다음을 시도했습니다. test 이 코드의 문제는 obj.value1 이 무엇이든 클래스 테스트가 항상 요소에 적용된다는 것입니다. 이렇게 : test obj.value2 가 진실 값과 같지 않으면의 클래스가 적용되지 않습니다. 이제 다음을 수행하여 첫 번째 예제의 문제를 해결할 수 있습니다. test checkValue1 함수는 다음과 같습니다. $scope.checkValue1 = function() { return $scope.obj.value === 'somevalue'; } ng-class 가 작동하는 방식인지 궁금합니다. 이와 비슷한 작업을 수행하려는 사용자 지정 지시문..

AngularJS : $ scope. $ apply () 호출시 $digest already in progress 오류 해결방법

질문 : AngularJS : $ scope. $ apply () 호출시 이미 진행중인 $ digest 오류 방지 Angular로 응용 프로그램을 빌드 한 이후로 내 페이지를 내 스코프에 수동으로 업데이트해야한다는 것을 알게되었습니다. 내가 아는 유일한 방법은 내 컨트롤러와 지시문의 범위에서 $apply() 이것의 문제는 다음과 같은 콘솔에 오류가 계속 발생한다는 것입니다. 오류 : $ digest가 이미 진행 중입니다. 누구든지이 오류를 피하거나 똑같은 일을하지만 다른 방식으로 달성하는 방법을 알고 있습니까? 답변 이 패턴을 사용하지 마십시오 -이로 인해 해결되는 것보다 더 많은 오류가 발생합니다. 무언가 고쳐 졌다고 생각했지만 그렇지 않았습니다. $scope.$$phase $digest 가 이미 진행..

개발관련/other 2021.10.01

Polymer 요소와 AngularJS 지침의 차이점

질문 : Polymer 요소와 AngularJS 지침의 차이점은 무엇입니까? Polymer 시작하기 페이지에서 작동중인 Polymer의 예를 볼 수 있습니다. 눈에 띄는 것은 platform.js 및 x-foo.html 의해 정의된다는 것입니다. 이것은 AngularJS의 지시문 모듈과 동일한 것 같습니다. angular.module('xfoo', []) .controller('X-Foo', ['$scope',function($scope) { $scope.text = 'hey hey!'; }) .directive('x-foo', function() { return { restrict: 'EA', replace: true, controller: 'X-Foo', templateUrl: '/views/x-fo..

Angular.js와 함께 Require.js를 사용하는 것이 합리적인가?

질문 : Angular.js와 함께 Require.js를 사용하는 것이 합리적입니까? 저는 Angular.js의 초보자이고 Backbone.js와 어떻게 다른지 이해하려고합니다 ... 우리는 Backbone을 사용하는 동안 Require.js로 패키지 종속성을 관리했습니다. Angular.js로 동일한 작업을 수행하는 것이 합리적입니까? 답변 예, 컴포넌트 모듈화를 require.js 를 사용할 수 require.js 와 함께 angular.js 를 사용하는 것이 좋습니다. both angular.js and require.js 사용하는 시드 프로젝트 가 있습니다. 출처 : https://stackoverflow.com/questions/12529083/does-it-make-sense-to-use-re..

AngularJS : 서비스 변수를 보는 방법

질문 : AngularJS : 서비스 변수를 보는 방법? 서비스가 있습니다. factory('aService', ['$rootScope', '$resource', function ($rootScope, $resource) { var service = { foo: [] }; return service; }]); foo 를 사용하여 HTML로 렌더링되는 목록을 제어하고 싶습니다. {{ item }} aService.foo 업데이트시기를 감지하기 위해 $scope 에 aService를 추가 한 다음 $scope.$watch() 를 사용하는이 패턴을 함께 조합했습니다. function FooCtrl($scope, aService) { $scope.aService = aService; $scope.foo = aS..

AngularJS의 지시문 범위에서 '@' 와 '=' 의 차이점

질문 : AngularJS의 지시문 범위에서 '@'와 '='의 차이점은 무엇입니까? 주제에 대한 AngularJS 문서를주의 깊게 읽은 다음 지시문을 다루었습니다. 여기에 바이올린이 있습니다. 다음은 몇 가지 관련 스 니펫입니다. HTML에서 : {{text}} pane 지시문에서 : scope: { biTitle: '=', title: '@', bar: '=' }, 내가 이해하지 못하는 몇 가지 사항이 있습니다. '@' 에는 "{{title}}" '을, '=' 에는 "title" '을 사용해야합니까? 속성으로 요소를 장식하지 않고 부모 범위에 직접 액세스 할 수도 있습니까? 문서에는 "표현식을 통해 격리 된 범위에서 부모 범위로 데이터를 전달하는 것이 바람직합니다."라고 나와 있지만 양방향 바인딩에서도..

AngularJS에서 컨트롤러간에 통신하는 올바른 방법

질문 : AngularJS에서 컨트롤러간에 통신하는 올바른 방법은 무엇입니까? 컨트롤러간에 통신하는 올바른 방법은 무엇입니까? window 관련된 끔찍한 퍼지를 사용하고 있습니다. function StockSubgroupCtrl($scope, $http) { $scope.subgroups = []; $scope.handleSubgroupsLoaded = function(data, status) { $scope.subgroups = data; } $scope.fetch = function(prod_grp) { $http.get('/api/stock/groups/' + prod_grp + '/subgroups/').success($scope.handleSubgroupsLoaded); } window.fetc..

AngularJS : Initialize service with asynchronous data

질문 : AngularJS : 비동기 데이터로 서비스 초기화 비동기 데이터로 초기화하려는 AngularJS 서비스가 있습니다. 이 같은: myModule.service('MyService', function($http) { var myData = null; $http.get('data.json').success(function (data) { myData = data; }); return { setData: function (data) { myData = data; }, doStuff: function () { return myData.getSomeData(); } }; }); myData 가 돌아 오기 전에 doStuff() 를 호출하려고하면 null 포인터 예외가 발생하기 때문에 분명히 이것은 작동하..

AngularJS의 ng-options를 사용하여 선택 작업

질문 : AngularJS의 ng-options를 사용하여 선택 작업 다른 게시물에서 읽었지만 알아낼 수 없었습니다. 배열이 있습니다. $scope.items = [ {ID: '000001', Title: 'Chicago'}, {ID: '000002', Title: 'New York'}, {ID: '000003', Title: 'Washington'}, ]; 다음과 같이 렌더링하고 싶습니다. Chicago New York Washington 또한 ID = 000002 인 옵션을 선택하고 싶습니다. 나는 선택 을 읽고 시도했지만 알아낼 수 없습니다. 답변 한 가지주의 할 점은 ngOptions가 작동 하려면 ngModel이 필요하다는 것입니다. "$ scope.blah를 선택한 값으로 설정 ng-model..

AngularJS에서 데이터 바인딩의 작동 원리

질문 : AngularJS에서 데이터 바인딩은 어떻게 작동합니까? AngularJS 프레임 워크에서 데이터 바인딩은 어떻게 작동합니까? 나는 그들의 사이트 에서 기술적 세부 사항을 찾지 못했습니다. 데이터가 뷰에서 모델로 전파 될 때 작동 방식이 다소 명확합니다. 하지만 AngularJS는 setter와 getter없이 모델 속성의 변경 사항을 어떻게 추적합니까? 이 작업을 수행 할 수있는 JavaScript 감시자가 있다는 것을 알았습니다. 그러나 Internet Explorer 6 및 Internet Explorer 7 에서는 지원되지 않습니다. 그렇다면 AngularJS는 예를 들어 다음을 변경 하고이 변경 사항을 뷰에 반영했음을 어떻게 알 수 있습니까? myobject.myproperty="new..

검색 엔진이 AngularJS 애플리케이션을 처리하는 방식

질문 : 검색 엔진은 AngularJS 애플리케이션을 어떻게 처리합니까? 검색 엔진 및 SEO와 관련하여 AngularJS 응용 프로그램에 두 가지 문제가 있습니다. 1) 사용자 정의 태그는 어떻게됩니까? 검색 엔진이 해당 태그 내의 전체 콘텐츠를 무시합니까? 즉 내가 가지고 있다고 가정 Hey, this title is important 사용자 정의 태그 안에 있음에도 불구하고 2) {{}} 바인딩 인덱싱의 검색 엔진을 문자 그대로 피하는 방법이 있습니까? 즉 {{title}} 나는 내가 뭔가 할 수 있다는 것을 안다. 하지만 실제로 크롤러가 제목을 "보도록"하려면 어떻게해야합니까? 서버 측 렌더링이 유일한 솔루션입니까? 답변 2014 년 5 월 업데이트 이제 Google 크롤러가 자바 스크립트를 실행..

AngularJS를 사용하여 브라우저 콘솔에서 $ scope 변수에 액세스 하는 방법

질문 : AngularJS를 사용하여 브라우저 콘솔에서 $ scope 변수에 어떻게 액세스합니까? Chrome의 JavaScript 콘솔에서 $scope 변수에 액세스하고 싶습니다. 어떻게하나요? $scope myapp 모듈 이름을 변수로 볼 수 없습니다. 답변 개발자 도구의 HTML 패널에서 요소를 선택하고 콘솔에 입력합니다. angular.element($0).scope() WebKit 및 Firefox에서 $0 은 요소 탭에서 선택한 DOM 노드에 대한 참조이므로 이렇게하면 선택한 DOM 노드 범위가 콘솔에 인쇄됩니다. 다음과 같이 요소 ID로 범위를 타겟팅 할 수도 있습니다. angular.element(document.getElementById('yourElementId')).scope() 애드..

AngularJS에서 범위 prototypal / prototypal inheritance 의 의미

질문 : AngularJS에서 범위 프로토 타입 / 프로토 타입 상속의 뉘앙스는 무엇입니까? API 참조 범위 페이지에 다음 내용이 표시됩니다. 범위는 상위 범위에서 상속 할 수 있습니다. 개발자 가이드 범위 페이지 에는 다음과 같은 내용이 있습니다. 범위 (원형)는 부모 범위에서 속성을 상속합니다. 그렇다면 자식 범위는 항상 부모 범위에서 프로토 타입 적으로 상속됩니까? 예외가 있습니까? 상속 할 때 항상 일반적인 JavaScript 프로토 타입 상속입니까? 답변 빠른 답변 : 일반적으로 자식 범위는 프로토 타입 적으로 부모 범위에서 상속되지만 항상 그런 것은 아닙니다. 이 규칙에 대한 한 가지 예외는 scope: { ... } 지시문입니다.이 경우 프로토 타입 적으로 상속되지 않는 "격리"범위가 생성..

AngularJS를 사용하여 체크박스 값 목록에 바인딩 하는 방법

질문 : AngularJS를 사용하여 확인란 값 목록에 어떻게 바인딩합니까? 몇 가지 확인란이 있습니다. ['apple', 'pear'] 같이 선택된 모든 값의 목록을 유지하도록 컨트롤러의 목록에 바인딩하고 싶습니다. ng-model은 하나의 확인란 값을 컨트롤러의 변수에 바인딩 할 수있는 것 같습니다. 컨트롤러의 목록에 네 개의 확인란을 바인딩 할 수있는 다른 방법이 있습니까? 답변 이 문제에 접근하는 방법에는 두 가지가 있습니다. 간단한 배열 또는 개체 배열을 사용하십시오. 각 솔루션에는 장단점이 있습니다. 아래에서 각 사례에 대해 하나씩 찾을 수 있습니다. HTML은 다음과 같습니다. {{fruitName}} 적절한 컨트롤러 코드는 다음과 같습니다. app.controller('SimpleArray..

jQuery 와 AngularJS의 차이점

질문 : jQuery 배경이 있다면“AngularJS에서 생각하기”? jQuery 에서 클라이언트 측 애플리케이션을 개발하는 데 익숙 하지만 이제 AngularJS 사용을 시작하고 싶습니다. 필요한 패러다임 전환을 설명 할 수 있습니까? 다음은 답을 구하는 데 도움이 될 수있는 몇 가지 질문입니다. 클라이언트 측 웹 애플리케이션을 다르게 설계하고 디자인하는 방법은 무엇입니까? 가장 큰 차이점은 무엇입니까? 무엇을하고 / 사용하지 말아야합니까? 대신 무엇을 시작해야하나요? 서버 측 고려 사항 / 제한 사항이 있습니까? jQuery 와 AngularJS 간의 자세한 비교를 찾고 있지 않습니다. 답변 1. 페이지를 디자인하지 말고 DOM 조작으로 변경합니다. jQuery에서 페이지를 디자인 한 다음 동적으로 ..

AngularJS에서 $ scope. $ watch와 $ scope. $ apply를 사용하는 방법

질문 : AngularJS에서 $ scope. $ watch와 $ scope. $ apply를 어떻게 사용하나요? $scope.$watch 및 $scope.$apply 사용 방법을 이해하지 못합니다. 공식 문서는 도움이되지 않습니다. 내가 구체적으로 이해하지 못하는 것 : DOM에 연결되어 있습니까? 모델에 대한 DOM 변경 사항을 어떻게 업데이트 할 수 있습니까? 그들 사이의 연결 지점은 무엇입니까? 이 튜토리얼을 시도했지만 $watch 및 $apply 대한 이해가 당연히 필요합니다. $apply 와 $watch 는 무엇을하고 어떻게 적절하게 사용하나요? 답변 AngularJS를 이해하기 위해서는 어떻게 작동하는지 알아야합니다. 무엇보다도 AngularJS는 소위 다이제스트 사이클 의 개념을 정의합니다..

AngularJS에서 ng-repeat로 키와 값을 반복하는 방법

질문 : AngularJS에서 ng-repeat로 키와 값을 반복하는 방법은 무엇입니까? 내 컨트롤러에는 $scope.object = data json 키와 값이있는 사전입니다. 템플릿에서 object.name 을 사용하여 속성에 액세스 할 수 있습니다. 키를 반복하고 다음과 같이 테이블에 표시 할 수있는 방법이 있습니까? {{key}} data.key 데이터는 다음과 같습니다 { "id": 2, "project": "wewe2012", "date": "2013-02-26", "description": "ewew", "eet_no": "ewew", } 답변 어때 : {{key}} {{ value }} 이 방법은 문서에 나열되어 있습니다 : https://docs.angularjs.org/api/ng/di..

AngularJS에서 키 누르기 이벤트를 사용하는 방법

질문 : AngularJS에서 키 누르기 이벤트를 사용하는 방법은 무엇입니까? 아래 텍스트 상자에서 Enter 키 누르기 이벤트를 포착하고 싶습니다. 더 명확하게하기 위해 ng-repeat 를 사용하여 tbody를 채 웁니다. 다음은 HTML입니다. 이것은 내 모듈입니다. angular.module('components', ['ngResource']); 리소스를 사용하여 테이블을 채우고 있으며 컨트롤러 코드는 다음과 같습니다. function Ajaxy($scope, $resource) { //controller which has resource to populate the table } 답변 다음과 같이 directive 을 추가해야합니다. 자바 스크립트 : app.directive('myEnter',..

728x90
반응형