如何在成功提交表單后重新加載導航欄？

Question

我正在使用angular.js。 我的導航欄有一個控制器，如下所示。

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

controllers.controller('NavbarController', ['$scope', '$http',
    function ($scope, $http) {
        $http.get('/api/courses')
        .success(function(data) {
            $scope.courses = data.objects;
        });
    }
]);

這將為我提供所有已創建的課程。 我把它放在導航欄上就像這樣：

<ul class="dropdown-menu">
  <li  ng-repeat="course in courses">
    <a href="#/course/course_id/{{ course.id }}">{{ course.name }}</a>
  </li>
</ul>

這在我加載頁面時有效。 但是，我有一個表單來創建一個新課程，也可以。 但是，在成功提交之后，在我完全重新加載頁面之前，導航欄將不包含該類。 這是我的控制器，它創建了一個新的課程。

controllers.controller('CreateCourseController', ['$scope', '$http',
    function($scope, $http) {
        $scope.form_data = {};
        $scope.submitForm = function() {
            $http.post('/api/courses', $scope.form_data).
            success(function(data) {
              // here, I want to add this item into the navbar selection somehow
            });
        }
    }
]);

什么是角度的最佳方式，將這個新添加的類添加到導航欄中，干凈利落？

Answer 1

您可以使用$ broadcast發送導航需要更新的消息，並使用$ on來監聽事件。 請參閱： https ： //docs.angularjs.org/api/ng/type/ $ rootScope.Scope

也許是這樣的：

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

controllers.controller('NavbarController', ['$scope', '$http',
function ($scope, $http) {
    var updateNav = function() {
        $http.get('/api/courses')
            .success(function(data) {
                $scope.courses = data.objects;
            });
    };

    // Init
    updateNav();

    // Subscribe
    $scope.$on('nav:updated', updateNav() );

}]);

controllers.controller('CreateCourseController', ['$scope', '$http',
function($scope, $http) {
    $scope.form_data = {};
    $scope.submitForm = function() {
        $http.post('/api/courses', $scope.form_data).
        success(function(data) {
            // here, I want to add this item into the navbar selection somehow
            $scope.$broadcast('nav:updated');
        });
    }
}]);