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');
        });
    }
}]);

如何在成功提交表单后重新加载导航栏？

1 个答案: