Question

尝试使用URL字符串基于函数设置<h1>时，我的功能无法识别。这是我的代码到目前为止，我会在Plunker中设置它，但有点尴尬，因为我无法复制URL更改：

angular.module('app').controller('NavCtrl', function($scope, $location) {

  // Create <h1> based on url string

  var pageUrl = $location.url().substring(1);

  $scope.pageTitleItems = {
    feedback: "Feedback",
    settings: "Settings",
    editprofile: "Edit Profile"
  };

  $scope.$watch('$scope.location.url()', function(newValue, oldValue, $location) {

    $scope.pageTitle = $scope.pageTitleItems.pageUrl;

    console.log($scope.pagetitle);

  });

});

有谁知道我在这里做错了什么？！

Answer 1

您的逗号无效：

$scope.pageTitleItems = {
    feedback: "Feedback",
    settings: "Settings",
    editprofile: "Edit Profile",  // <-- remove that comma
  };

此外，您可能希望观察路线更改：

How to watch for a route change in AngularJS?

最后这可能会有所帮助：

$rootScope.$on('$routeChangeSuccess', function(evt, cur, prev) {
    ...do what you have to do here, maybe set a $rootScope.path as you did
})

具体到您的代码，您可能需要定义：

$scope.location = $location

这样你的手表就可以看了。

Answer 2

我认为您$watch无法$scope.location.url()进行更改，而您最好的选择是使用$ routeChangeStart作为described here。我试着看$location.path()和$location.url()，他们都返回未定义。

如果我理解正确，您需要根据当前路径的URL设置H1。如果是这种情况，您是否尝试过将$scope.pageTitle = $scope.pageTitleItems.pageUrl;直接放在控制器中（即：在$ scope之外。$ watch）？

Answer 3

以下是需要此功能的人的答案：

$scope.$watch(function() { return $location.path(); }, function(newValue, oldValue) {

    var pageUrl = $location.path().substring(1);

    var pageTitleItems = {
      feedback: "Feedback",
      settings: "Settings",
      editprofile: "Edit Profile"
    };

    $scope.pageTitle = pageTitleItems[pageUrl];

    console.log('page url ' + pageUrl);

    console.log('page title ' + $scope.pageTitle);  

  });

根据Angular.js </h1>中的URL字符串设置<h1>

3 个答案: