범위 변수가 변경 될 때 동적 뷰를 올바르게 업데이트하는 방법

Question

Angular SPA를 개발 중이며 하나의보기에 해당 페이지의 콘텐츠 대부분을 결정하는 변수 $scope이 있습니다. 사용자가 메뉴의 다른 링크를 클릭하면 매개 변수가 url을 통해 전달되고 범위 변수가 업데이트됩니다. 그러나 이렇게하면보기가 업데이트되지 않습니다. 나는 일반적으로 여기에 질문하지 않지만, 나는 모든 것과 같이 보이는 것을 시도해 보았고, 왜 그 견해가 갱신되지 않는지 알 수 없다. 여기에 코드가 같은 모습입니다 : 처음

HTML

<div ng-init="loadTopicView()"> 
    <h1 ng-bind="selectedTopic.title"></h1> 
    <p ng-bind="selectedTopic.body"></p> 
</div> 

JS

$scope.loadTopicView = function() { 
    var selectedTopic = urlParams.index; 
    $scope.selectedTopic = $scope.topics[selectedTopic]; 
} 

, 나는 그것 때문에이 $scope.selectedTopic가 올바른 값을 받고되지 않았습니다 호출되는 한 방법을 생각 URL과 같은 가치는 아직 없습니다. $scope.topics은 개체의 배열이며 사용자 클릭 연결은 URL을 통해 색인을 전달한 다음 올바른 개체를 $scope.selectedTopic에 할당합니다.

많은 것을 시도한 후에 나는 심지어 window.setInterval을 사용하여 차이가 있는지 확인하기 위해 반복적으로 실행 해 보았지만 어떤 이유로 html이 업데이트되지 않는다는 사실을 변경하지 않았습니다.

부울 값과 ng-show를 사용하여 이전과 같은 문제가 발생했지만이 문제를 해결할 수 없습니다. 어떤 도움을 주시면 감사하겠습니다. 요청한

추가 정보 : 여기

는 $scope.loadPage

$scope.loadPage = function(path, passedParams) { 
    // at this point, `path` is going to the /topics view, and the `passedParams` has the id for the topic to load, lets say it is the integer: 5. 

    if(path === $location.path() && path == '/topics') { // If you're switching topics but staying on the topic page 
     if (!passedParams) { 
      $state.reload(); // Meaning just refresh the page, no topic was selected. 
     } else { 
      $location.path(path).search({params: passedParams}); 
      $rootScope.$emit("CallingTopicUpdate", {}); 
     } 
    } else { // This works fine in loading the correct topic, it is only when you are already on the topic page (so the above if), that it won't load the scope changes. 
     if (passedParams) { 
      $location.path(path).search({params: passedParams}); 
     } else { 
      $location.path(path); 
     } 
    } 
}; 

위한 스크립트 콘텐츠 페이지 여기

<ul class="sidebar-nav"> 
    <li ng-repeat="topic in topics"> 
     <a href="" ng-click="loadPage('/topics', topic.id)" ng-bind="topic.title"></a> 
    </li> 
</ul> 

에 보여 될 어떤 선택 측면 탐색의 HTML이다

오와 같은 컨트롤러에 있습니다. $scope.loadTopicView

$rootScope.$on("CallingTopicUpdate", function(){ 
    $scope.loadTopicView(); 
}); 

$emit 및 $on을 사용하면 주제 페이지에있는 동안 다른 주제가 선택되면이 기능이 다시 실행됩니다. 그러나 여기에서 $scope.selectedTopic을 업데이트하지만 변경 내용이 화면에로드 된 데이터에 나타나지 않습니다.

결과적으로 매개 변수 (항목을 나타내는 정수)가 URL에서 변경되지만 항목에 따라 동적으로 데이터를 바인딩하는 페이지보기는 선택한 항목으로 전환되지 않습니다. 다른 주제를 선택하십시오. 본질적으로 주제를 계속 선택하면 URL이 올바르며보기가 URL 뒤에있는 하나의 주제입니다.

Answer 1

$scope.loadTopicView = function(param) { 
      var selectedTopic = param ? param : 1; 
      $scope.selectedTopic = $scope.topics.filter(function(value){return value.id==selectedTopic; }); 
}; 
$scope.loadPage = function(path, passedParams) { 
       // at this point, `path` is going to the /topics view, and the `passedParams` has the id for the topic to load, lets say it is the integer: 5. 
       if(path === $location.path() && path == '/topics') { // If you're switching topics but staying on the topic page 
        if (!passedParams) { 
         $state.reload(); // Meaning just refresh the page, no topic was selected. 
        } else { 
         $location.path(path).search({params: passedParams}); 
         $rootScope.$emit("CallingTopicUpdate", passedParams); 
        } 
       } else { // This works fine in loading the correct topic, it is only when you are already on the topic page (so the above if), that it won't load the scope changes. 
        if (passedParams) { 
         $location.path(path).search({params: passedParams}); 
        } else { 
         $location.path(path); 
        } 
       } 
}; 
$rootScope.$on("CallingTopicUpdate", function(event, param){ 
      $scope.loadTopicView(param); 
});