각도 클래스가 업데이트되었지만 각도 클래스 시계가 트리거되지 않음

Question

각도를 사용하여 드롭 다운 메가 메뉴를 구현하려고합니다. 사용자가 링크 1을 클릭하면 링크 1의 콘텐츠가 표시됩니다. 내 지시문 따른다 같이 링크 및 메뉴 항목의 컨트롤러 및 추적하는 역할

1. 이동 메뉴
2. 메뉴 링크, 사용자가 메뉴를 개방/폐쇄하기 위해 클릭하는 것으로, 실제의 링크를 말한다

   angular.module("myApp", []) 
   .controller("testCtrl", function ($scope) {}) 
   .directive("mobileMenu", function() { 
       return { 
        controller: function ($scope) { 
         this.menuLinks = []; 
         this.menuItems = []; 
   
         this.addMenuLink = function (l) { 
          this.menuLinks.push(l); 
         }; 
         this.addMenuItem = function (m) { 
          this.menuItems.push(m); 
         }; 
         // Function to close all other menu items if they are open. 
         // This is because only one menu item can be active at a time 
         this.closeOthers = function (selectedMenuLink) { 
   
          angular.forEach(this.menuLinks, function (l) { 
           if (l !== selectedMenuLink) { 
            l.selected = false; 
           } 
          }); 
   
          angular.forEach(this.menuItems, function (m) { 
           if (selectedMenuLink.target == m.menuId) { 
            m.test = true; 
           } else { 
            m.test = false; 
           } 
          }); 
         }; 
        } 
       }; 
   }).directive("menuLink", function() { 
       return { 
        require: "^mobileMenu", 
        scope: {}, 
        link: function(scope, element, attrs, menuController) { 
          scope.selected = false; 
        menuController.addMenuLink(scope); 
   
        scope.$watch('selected', function(newValue, oldValue) { 
         if (oldValue === newValue) {return}; 
   
         if (newValue) { 
          scope.target = angular.element(element[0].children[0]).attr("data-menu"); 
          menuController.closeOthers(scope); 
         } 
        }); 
        } 
       }; 
   }).directive("menuItem", function() { 
       return { 
        require: "^mobileMenu", 
        scope: true, 
        link: function (scope, element, attrs, menuController) { 
   
         scope.test = false; 
         scope.menuId = attrs.id; 
         menuController.addMenuItem(scope); 
   
         scope.$watch('test', watchLink); 
         scope.$watch(attrs.collapse, watchLink); 
         scope.$watch(function() { 
          return scope.test; 
         }, watchLink); 
   
         var watchLink = function (newValue, oldValue) { 
   
          // Initializing for the first time, do nothing 
          if (newValue === oldValue) return; 
   
   
          // If the collapse attribute has a true value, collapse this element 
          if (newValue) { 
           collapse(); 
          } else { 
           expand(); 
          } 
         }; 
   
         // Helper function to collapse the element 
         var collapse = function() { 
          element.css({ 
           height: "0px" 
          }); 
         }; 
   
         // Helper function to show the element 
         var expand = function() { 
          element.css({ 
           height: "200px" 
          }); 
         }; 
        } 
       }; 
   }); 
   

   : 항목
3. 메뉴 항목의 scope.test 값 여기

에 따라/숨기기를 보여 주어야 메뉴 항목 내 AngularJS와 코드

그리고 여기 내 HTML 코드입니다 :

<div ng-app="myApp" ng-controller="testCtrl"> 
<div mobile-menu> 
    <ul> 
     <li menu-link> 
      <a href="#" ng-click="selected = !selected" ng-class="{'expanded' : selected, 'collapsed' : !selected}" data-menu="menu0">Link 1</a> 
     </li> 

     <li menu-link> 
      <a href="#" ng-click="selected = !selected" ng-class="{'expanded' : selected, 'collapsed' : !selected}" data-menu="menu1">Link 2</a> 
     </li> 
    </ul> 
    <div id="menu0" ng-class="{'expanded' : test, 'collapsed' : !test}" menu-item collapse="!test"> 
     <p class="text">First Menu</p> 
    </div> 
    <div id="menu1" ng-class="{'expanded' : test, 'collapsed' : !test}" menu-item collapse="!test"> 
     <p class="promo-text">Second Menu</p> 
    </div> 
</div> 

I 메뉴 링크 # 1을 클릭하면 문제가 해당 메뉴 항목 (1)의 scope.test 값이 갱신되어야 #하고 있습니다 '스코프 워치가 트리거되어야하지만 그렇지 않습니다. 스코프 워치가 watchLink 함수를 트리거하면 메뉴 아이템 # 1의 높이가 200px가 될 것으로 기대합니다.

나는 또한 jsfiddle 예를 첨부 : 브라우저 콘솔 도구를 보면 http://jsfiddle.net/EmwBP/28/

, 해당 메뉴 항목의 NG-클래스는 항상 scope.test 값을 기준으로 업데이트됩니다. 그러나 세 가지 범위 관찰자를 설정해도 아무도 트리거되지 않았습니다. 또한 ng-class 지시어를 사용하여 scope.test 값이 업데이트되고 최종 구현에서 제거된다는 것을 보여줍니다.

보통 메뉴 항목 지시문을 메뉴 링크의 하위 항목으로 지정했지만 메뉴 항목을 넣어야하는 요구 사항이 있습니다. 즉, 현재 메뉴 항목의 슬라이드 다운 효과를 얻으려는 요구 사항이 있습니다. 그것 아래에 요소를 밀어. 귀하의 조언에 미리와 지원

Answer 1

에서

많은 감사 당신은 scope: {}를 사용하여 menuLink의 새로운 고립 범위를 만들 수 있습니다. 따라서 범위 내에서 설정 한 범위 변수 (예 : selected)는 해당 범위 내에서만 사용할 수 있으며 형제 또는 상위 범위로 전파되지 않습니다.

menuLink 범위를 분리하려면 scope: true을 사용하십시오.

---

이는 문제가되지 않습니다. 문제는 정의하기 전에 watchLink이 사용된다는 것입니다. 수정 : http://jsfiddle.net/EmwBP/31/