用于标题标签的 ng-bind 超出元素答案

【问题标题】：ng-bind for title tag goes outside of the element用于标题标签的 ng-bind 超出元素
【发布时间】：2021-04-16 22:37:51
【问题描述】：

ng-bind 用于标题内的标题标签的行为很奇怪。这是我的代码：

<title page-title ng-bind="page_title"></title>

这是输出：

My Page Sucks
<title page-title="" ng-bind="page_title" class="ng-binding"></title>

它在标题标签的外面而不是在里面

这是 pageTitle 指令的 sn-p：

streamViewApp
// page title
.directive('pageTitle', [
    '$rootScope',
    '$timeout',
    function($rootScope, $timeout) {
        return {
            restrict: 'A',
            link: function() {
                var listener = function(event, toState) {

                    var name = ($rootScope.site_settings) ? (($rootScope.site_settings[0] != undefined) ? $rootScope.site_settings[0]  : 'StreamView' ): 'StreamView';

                    var default_title = name.value;

                    $timeout(function() {
                        $rootScope.page_title = (toState.data && toState.data.pageTitle)
                            ? default_title + ' - ' + toState.data.pageTitle : default_title;
                    });
                };
                $rootScope.$on('$stateChangeSuccess', listener);
            }
        }
    }
]);

更新：

在body标签中调用时效果很好，在head中调用时会发生奇怪的事情

<body><title page-title="" ng-bind="page_title" class="ng-binding">My Page Sucks</title>

【问题讨论】：

你想做什么，你能显示pageTitle指令吗？
@Raxel21 添加了其他信息 :)
请将您的代码发布为文本，而不是图像。
@Phix 当然，请检查。谢谢

标签： javascript html angular angular7 ng-bind

【解决方案1】：

不要使用ng-bind，而是将页面标题定义为带有路由器状态的自定义数据。

state('customerdata', {
        url: '/viewcustomer',
        templateUrl: '/components/customers.html',
        controller: 'customerdatacntrl',
        controllerAs: 'self',
        data: {
            pageTitle: 'Customer Data'     <--- Notice here
        }

然后在指令中，您可以获取toState 对象并从那里设置下一页标题。

return {
      link: function (scope, element) {    
        var listener = function (event, toState) {

          var pageTitle;
          if (toState.data && toState.data.pageTitle) {
            pageTitle = toState.data.pageTitle;
          }

          $timeout(function () {
            element.text(pageTitle);
          }, 0, false);
        };

        $rootScope.$on('$stateChangeSuccess', listener);
      }
};

【讨论】：

很抱歉，我们无法更改 ng-bind 的用法，因为它在我们的系统和其他系统上也被广泛使用。主要问题是为什么标题被附加在突然调用它的实际元素之前，因为这在以前很好用。还是谢谢