AngularJS中ng-bind绑定的两个变量间添加空格问题求助

首先修正你代码里的HTML结构错误，原始代码的标签嵌套写法有误，正确的结构应该是：

<div>
  <h6 ng-bind="empName + empId" class="modal-body scrollable"></h6>
</div>

针对需求，有几种简单有效的解决方式：

• 直接在拼接逻辑里加空格字符串
  因为ng-bind的表达式用双引号包裹，内部可以用单引号定义空格字符串，这样就能实现变量间的空格：

  <div>
    <h6 ng-bind="empName + ' ' + empId" class="modal-body scrollable"></h6>
  </div>
  

• 使用ng-bind-template更直观拼接
  ng-bind-template支持直接写模板字符串，语法更清晰，无需手动拼接：

  <div>
    <h6 ng-bind-template="{{empName}} {{empId}}" class="modal-body scrollable"></h6>
  </div>
  

• 若需使用 （非必要，推荐前两种）
  因为ng-bind会自动转义HTML字符，直接写 不会生效，需要用ng-bind-html配合$sce处理：

  1. 控制器中处理内容（注入$sce服务）：

     $scope.empInfo = $sce.trustAsHtml($scope.empName + ' ' + $scope.empId);
     

  2. 页面中绑定：

     <div>
       <h6 ng-bind-html="empInfo" class="modal-body scrollable"></h6>
     </div>
     

内容的提问来源于stack exchange，提问作者Parikshith Kustagi