AngularJS：在没有范围的情况下编译字符串中的角码

我有一个可以管理我所有UI标签的角度服务。它包含一个对象，其中包含我需要的有关选项卡的所有信息，如图标，标签，URL等。我有一个用例，我的选项卡上有一个动态计数器，但我无法弄清楚如何获取它工作。AngularJS：在没有范围的情况下编译字符串中的角码

服务片段：

angular.module('app.services').service('tabService', function($rootScope, $route, $location) { 

    var tabs = { 
     "/front": { 
      "search": { 
       label: "Search", 
       url: "/search", 
       classIcon: "fa fa-search", 
       urlMatchAddt: ['/searchResults','/productDetails'] 
      }, 
      "order": { 
       label: "Order", 
       url: "/cart", 
       classIcon: "fa fa-shopping-bag" 
      } ....

HTML代码：index.html的（tabService注入到我的BaseCtrl控制器）

<body ng-app="app" ng-controller="BaseCtrl"> 
... 
<li ng-repeat="t in tabService.getTabs()" ng-class="{active: tabService.isActiveTab(t.url)}" ng-cloak> 
        <a href="#{{t.url}}"><i class="{{t.classIcon}}" aria-hidden="true" ng-bind-html=""></i>&nbsp;<span ng-bind-html="t.label | trustHTML"></span></a> 
       </li> 
.... 
</body>

所以我试图例如做的是在label我的标签之一的字段我想把类似的东西

label: "Order - {{counter}}"

因此，每个提姆e我更新{{counter}}变量，然后我的标签也会刷新。 label也可以包含HTML代码，这就是为什么我使用ng-bind-html指令。

目前我对变量做了一个丑陋的$watch，当它发生变化时，我手动使用包含更新值的新字符串完全覆盖标签值。

我尝试过使用$compile，但我不能将它与$rootScope一起使用，我无法将$scope传递到我的服务中。我不确定最好的解决方案是什么。

任何想法？

AngularJS：1.6

来源

2017-05-05 Raymond Holguin

有没有用做' {{t.label}}任何问题 - {{$指数}}'？为什么这些令人毛骨悚然的ng-bind-html在那里？ – estus

@estus我的一些'label'属性有html。例如，我的'计数器'将被包裹在span标签中以利用fontawesome图标 –

然后请让问题反映这一点。此外，还有一些模板，但不清楚它来自哪里。这是一个指令吗？它如何与服务绑定？请参阅http://stackoverflow.com/help/mcve – estus

基本上有一个需要一个指令/组件，而不是<a ...>...</a>。

$watch本身没有什么不好看的，但是在单个控制器中做这件事肯定会很难看。

要计算像Order - {{counter}}这样的字符串，$compile总是过量使用，但$interpolate服务来救援。它的唯一目的是根据需要将Angular表达式插入到字符串中。

这可能应该是这样的

app.directive('tab', function() { 
    return { 
    scope: { 
     tabData: '<', 
     counter: '<' 
    }, 
    template: '<a ...>...<span ng-bind-html="interpolatedLabel | trustHTML"></span></a>', 
    controller: function ($interpolate, $scope) { 
     $scope.$watchGroup(['tabData.label', 'counter'], function() { 
     $scope.interpolatedLabel = $interpolate($scope.tabData.label)({ 
      counter: $scope.counter 
     }); 
     } 
    } 
    } 
});

和

<li ng-repeat="t in tabService.getTabs()"...> 
    <tab tab-data="t" counter="$index"></tab> 
</li>

来源

2017-05-06 00:37:53 estus

感谢这似乎工作。它破坏了我的Boostrap CSS，但这完全是我想的另一个问题。 –

很高兴为你效劳。修复了代码中的结束标记''。您可以将它的属性指令设置为像<'以更好地适应布局，但适当的惯用方式是使它成为元素指令（基本上是一个组件）并为其提供样式，例如“display：inline”或“display：inline-block”。 – estus

AngularJS：在没有范围的情况下编译字符串中的角码

回答

相关问题