디렉티브에서의 ControllerA 사용

디렉티브에서의 ControllerA 사용

난 존 파파의 각을 따라가려고 노력중이야JS 스타일 가이드는 이쪽에서 controllerAs를 사용하는 것으로 방향을 전환했습니다.그러나 이것은 동작하지 않습니다.템플릿이 VM에 할당된 항목에 액세스할 수 없는 것 같습니다.동작을 나타내는 매우 간단한 plnkr 예를 참조하십시오.

http://plnkr.co/edit/bVl1TcxlZLZ7oPCbk8sk?p=preview

angular
    .module('app', []);

angular
    .module('app')
    .directive('test', test);

function test() {
    return {
        restrict: 'E',
        template: '<button ng-click="click">{{text}}</button>',
        controller: testCtrl,
        controllerAs: 'vm'
    }
}

angular
    .module('app')
    .controller('testCtrl', testCtrl);

function testCtrl() {
  var vm = this;
  vm.text = "TEST";
}

controllerAs 구문을 사용할 때는 보통과 같이 $scope에 액세스하지 않습니다.변수 VM이 스코프에 추가되므로 버튼이 다음과 같이 됩니다.

<button ng-click="click">{{vm.text}}</button>

주의:vm.선두에 추가되다text.

여기 픽스가 적용된 플렁크 포크가 있습니다.

---

Q: 지시문 속성으로 전달된 속성에 액세스하는 방법을 알고 계십니까? 예: "scope: { text: '@' }"? 그런 다음 컨트롤러에서 $120을 사용하고 vm.text = $120.text를 설정해야 합니까?

A: 당신이 참조하는 기사에는 이 시나리오만을 설명하는 y075 섹션이 있습니다.조사하다bindToController:

return {
    restrict: 'E',
    template: '<button ng-click="click">{{text}}</button>',
    controller: testCtrl,
    controllerAs: 'vm',
    scope: {
        text: '@'
    },
    bindToController: true // because the scope is isolated
};

그러면 다음 웹 사이트에 접속할 수 있습니다.vm.text

컨트롤러 인스턴스 에일리어스인 "controllerAs"를 사용하는 경우:vm의 경우 - 스코프에 공개되어 있습니다..vm스코프의 속성.

따라서 컨트롤러의 속성(즉, 컨트롤러의 속성)에 액세스하려면{{vm.text}}또는ng-click="vm.click".

위와 같이 'controllerAs' 구문을 사용하는 경우 스코프는 컨트롤러의 'this' 참조에 바인딩됩니다.따라서 스코프 속성을 추가 객체 리터럴($scope 등)에 넣을 필요 없이 컨트롤러에 바인드된 새로운 네임스페이스('vm')를 도입할 수 있습니다.따라서 컨트롤러 범위에 있는 모든 항목에 액세스하려면 다음과 같은 'vm' 네임스페이스가 필요합니다.

'<button ng-click="click">{{vm.text}}</button>'

controllerAs 구문을 사용하는 경우,

bindToController: true

지시대로 작동될 겁니다

나는 이 티켓이 꽤 오래되었다는 것을 깨달았다.나중에 누가 실수할 경우를 대비해서 0.02달러를 추가하겠습니다.

우선, 당신이 달성하려고 하는 것에 대한 문맥을 갖는 것이 좋을 것입니다. 왜냐하면 당신은 디자인 규칙을 어기고 있는 것 같기 때문입니다.명령어는 컨트롤러의 내부 동작을 알 필요가 없습니다.또, 그 반대의 경우도 마찬가지입니다.

지시문에서 버튼의 캡션을 설정하는 간단한 예를 작성했습니다.여기에는 컨트롤러가 필요하지 않으며, 단지 당신의 예를 따르기 어려울 뿐이라고 생각합니다.

var myApp = angular.module('myApp', []);

myApp.directive('myDirective', function() {
  return {
    scope: {
      caption: "@"
    },    
    template: '<button>{{caption}}</button>'
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="myApp">
  <my-directive caption="Hello World" />
</div>

언급URL : https://stackoverflow.com/questions/31857735/using-controlleras-with-a-directive