Angular 指令模板未知范围答案

【问题标题】：Angular directive template unknown scopeAngular 指令模板未知范围
【发布时间】：2016-04-08 10:43:47
【问题描述】：

我知道有很多关于 AngularJS 以及应该如何使用指令的问题和帖子。我让我的工作正常，直到我遇到另一个我不知道如何解决的问题。

我在自定义 HTML 元素上使用指令。指令将此元素转换为模板中定义的常规 html 树。 HTML 元素具有一些在构建模板时使用的属性。通过 HTTP 请求接收其中一个元素的数据并成功加载。这是我工作正常的部分。

现在我想做更多的事情。 I've created a plunker which is an example of what I want to achieve.这是一个假的，但很好地说明了我的问题。

index.html:

<body ng-controller="MainCtrl">
    <div id="phones">
        <phone brand="SmartBrand" model="xx" comment="blah"></phone>
        <phone brand="SmarterBrand" model="abc" comment="other {{dynamic.c1}}"></phone>
    </div>
</body>

角度指令：

app.directive('phone', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            'comment': '@',
            'brand': '@'
        },
        templateUrl: 'customTpl.html',
        controller: function($scope) {
            fakeResponse = {
                "data": {
                    "success": true,
                    "data": "X300",
                    "dynamic": {
                        "c1": "12",
                        "c2": "1"
                    }
                }
            }
            $scope.model = fakeResponse.data.data;
            $scope.dynamic = fakeResponse.data.dynamic;
        }
    }
});

模板：

<div class="phone">
    <header>
        <h2>{{brand}} <strong>{{model}}</strong></h2>
    </header>
    <p>Comment: <strong>{{comment}}</strong></p>
</div>

所以我希望能够自定义元素中的标签之一（本例中的电话评论）。诀窍是标签中的附加信息数量可能会有所不同。我唯一可以确定的是，这些名称将与从 AJAX 请求中收到的名称相匹配。我可以使用 AJAX 接收整个评论，这将解决我的问题。但我想将模板与构建它的变量分开。有可能吗？

【问题讨论】：

您可以将动态部分分隔为另一个指令或作为 ngRepeat 语句，然后循环，并且您拥有的动态数据数量将显示元素
@xelilof 感谢您的回复。如果一部手机的评论是：comment="I want {{dynamic.c1}} hours of playtime in {{dynamic.c2}} lifetime"，而另一部手机的评论是：comment="It is unclear if {{dynamic.c1}} monkeys can destroy {{dynamic.c2}} phone in {{dynamic.c3}} hour"？我猜 ng-repeat 不会做...

标签： angularjs ajax angularjs-directive angularjs-templates

【解决方案1】：

好的，我搞定了。它可能不是最先进的解决方案（我认为@xelilof 建议用另一个指令来做可能更正确），但我不知道如何去做（所以请随时帮助我）。

我已将{{comment}} 部分转换为由服务分析的微模板。 I've made a plunk to show you a working sample.

现在的 JS 部分是这样的：

app.directive('phone', ['dynamic', function(dynamic) {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      'comment': '@',
      'brand': '@',
      'color': '@',
      'photo': '@'
    },
    templateUrl: 'customTpl.html',
    controller: function($scope) {
      fakeResponse = {
        "data": {
          "success": true,
          "data": "X300",
          "dynamic": {
            "c1": "12",
            "c2": "2"
          }
        }
      }
      $scope.model = fakeResponse.data.data;
      $scope.comment2 = dynamic($scope.comment, fakeResponse.data.dynamic);
      console.log("Comment after 'dynamic' service is: " + $scope.comment);
    }


  }
}]);

app.factory('dynamic', function() {
  return function(template, vars) {
    for (var v in vars) {
      console.log("Parsing variable " + v + " which value is " + vars[v]);
      template = template.replace("::" + v + "::", vars[v]);
    }
    return template;
  }

});

【讨论】：