Question

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

我在自定义HTML元素上使用指令。 Directive将此元素转换为模板中定义的常规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>

Angular指令：

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收到整个评论，这将解决我的问题。但我想将模板与它构建的变量分开。有可能吗？

Answer 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;
  }

});

角度指令模板未知范围

1 个答案: