angularjs - 环境

Question

<h1>尝试使用 URL 字符串设置基于函数时，我的函数身份不明。到目前为止，这是我的代码，我会在 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
  };

此外，您可能需要注意路线变化：

如何在 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 ，如此处所述。我试图观察$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);  

  });