클릭하면 UI가 자동으로 업데이트되지 않음

Question

생산 테이블에 <td>을 표시하는 데 문제가 있습니다.

vm.editDeleteButtonsVisibile (Controller-As 구문 사용)이 참일 경우 테이블의 마지막 <td>이 조건에 따라 표시되어야합니다. 기본적으로이 값은 false이지만 true로 변경하면 UI가 변경 사항을 반영하지 않습니다.

<tbody ng-controller="EditProductController as vm"> <!-- This ng-controller is somewhere else --> 
    <tr ng-repeat="product in vm.products"> 
     <td>{{ product.productName}}</td> 
     <td>{{ product.productCode }}</td> 
     <td>{{ product.releaseDate | date }}</td> 
     <td>{{ product.price | currency }}</td> 
     <td width="15%" ng-if="vm.editDeleteButtonsVisible"> <!-- Error Here --> 
      <button type="button" class="btn btn-default" ng-click="vm.editItem(product.productCode)">Edit</button> 
      <button type="button" class="btn btn-danger" ng-click="vm.deleteItem(product.productCode)">Delete</button> 
     </td> 
    </tr> 
</tbody> 

이 내가 값 vm.editDeleteButtonsVisible를 업데이트하고있어 컨트롤러 :

이 내 <tbody>는 모습입니다

var EditProductController = function() { 
    vm.editDeleteButtonsVisible = false; // Default value 

    vm.showEditDeleteButtons = function() { 
     vm.editDeleteButtonsVisible = true; 
     console.log(vm.editDeleteButtonsVisible); // Prints true, so value was updated 
    } 
} 

이 vm.showEditDeleteButtons() 다른보기에서, 호출되는 방법입니다 :

<div id="editProductBtn" ng-controller="EditProductController as pvm"> 
    <button type="button" class="btn btn-default" ng-click="pvm.showEditDeleteButtons()">Edit Products</button> 
</div> 

나는 이미 ng-controller="EditProductController"이라고 선언하고 있습니까? 나는 그것이 한 번 그것을 메인보기로 선언하고 다른 시간을 별도의보기로 선언한다.

Answer 1

문제는 컨트롤러를 두 번 정의한다는 것입니다. 각도 조절기는 싱글 톤이 아닙니다. 그래서 당신은 두 개의 인스턴스를 생성하고 있습니다. 변수 중 하나에서 변수를 업데이트하고 다른 변수에서 변수를 찾고 있습니다. 이것은 작동하지 않습니다.

<tbody ng-controller="EditProductController as vm"> 

<div id="editProductBtn" ng-controller="EditProductController as pvm"> 

및

는 두 개의 인스턴스를 작성합니다. 당신이해야 할 일은 하나의 컨트롤러를 사용하거나 하나의 서비스 (싱글 톤)를 만들고 서비스에 변수를 보관하는 것입니다.