从服务器获取 HTML 时不显示范围值答案

【问题标题】：Scope values aren't displayed when getting HTML from server从服务器获取 HTML 时不显示范围值
【发布时间】：2016-12-08 04:04:33
【问题描述】：

更新在对我的代码进行了多次测试之后，我正在更新我之前的问题，因为我现在更清楚什么不起作用了。

当我浏览到本地的 / 目录时，会提供我的 HTML 文件
除了我的指令中 $scope 的内容（见下文）之外，所有页面都加载良好。
我测试过直接加载页面（直接点击html文件）就可以看到内容了。

我不确定问题出在哪里。我已经从 HTML 文件中删除了所有不必要的行，以便更好地展示我的代码。 {{}} 只是模板引擎语言。

HTML

<DOCTYPE html>

<html ng-app="docsSimpleDirective">
<head>
<link rel="stylesheet" type="text/css" href="/css/text.css">
<link rel="stylesheet"      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-  alpha.5/css/bootstrap.min.css" integrity="sha384-  AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi"   crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script   src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js">    </script><!-- Tether for Bootstrap --> 
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.min.js"></script><!-- Bootstrap --> 

</head>
<body >

<h3>Select some text </h3>
<div ng-controller="Controller">
{% for i in result %}
<div id={{i._id}} class="task" commentId = {{i._id}} get-popover- content>{{i.text}} </div>
<div id={{i._id}} class="task" commentId = {{i._id}} my-customer="customer">{{i.text}} </div> 
<br/>
{% endfor %}
</div>

<script>
(function(angular) {
'use strict';
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
   $scope.customer = {
     name: 'Naomi',
     address: '1600 Amphitheatre'
   };
 }])
.directive('myCustomer', function() {
return {
  scope: {
    myCustomer: '='
  },
template: 'Name: {{myCustomer.name}} Address:         {{myCustomer.address}}'
  };

});
})(window.angular);
</script> 
</body>
</html>

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

您可以为directive 创建一个isolated scope，如下所示，其名称与directive 名称相同，

scope: {
         myCustomer: '='
      }

并将控制器的$scope.customer 链接到此isolated scope，如下所示，

<div ... my-customer="customer"></div>

并更改您的模板以像这样访问相同，

template: 'Name: {{myCustomer.name}} Address: {{myCustomer.address}}'

工作样本：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
<h3>Select some text </h3>
<div ng-controller="Controller">

<div id="test1" class="task" commentId="test1" get-popover-content>{{i.text}} </div>
<div id="test2" class="task" commentId="test2" my-customer="customer">{{i.text}} </div> 
<br/>

</div>

<script>
(function(angular) {
'use strict';
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
 $scope.customer = {
  name: 'Naomi',
  address: '1600 Amphitheatre'
 };
 }])
.directive('myCustomer', function() {
return {
  scope: {
     myCustomer: '='
  },
  template: 'Name: {{myCustomer.name}} Address: {{myCustomer.address}}'
};
});
  
  angular.bootstrap(document, ['docsSimpleDirective']);
})(window.angular);
  
</script>
  
</body>

【讨论】：

我试过了。它打印“名称”和“地址”而不是它们的值。
@AmirA.Eitan 如果您在我上面的答案中单击“运行代码 sn-p”，您可以看到这些值。我想你可能做错了什么。你能用你尝试的方法编辑你的问题吗？我可以看看修复代码。你能编辑你的问题吗？
我已经复制了整个 HTML 代码，以防万一。谢谢！
@AmirA.Eitan 在您的 html 中，您有这样的 my-customer customer="customer"，您可以将其更改为 my-customer="customer" 并删除此 <my-customer customer="customer"></my-customer> 吗？看起来你混合了两个答案。
这样，<div id={{i._id}} class="task" commentId = {{i._id}} my-customer="customer"> {{i.text}} </div>

【解决方案2】：

您必须使用 scope: { .... } inside 指令来访问您的控制器范围
控制器

(function(angular) {
'use strict';
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
 $scope.customer = {
  name: 'Naomi',
  address: '1600 Amphitheatre'
 };
 }])

HTML

// use this directive and pass customer to the directive scope
<my-customer customer="customer"></my-customer>

指令

.directive('myCustomer', function() {
   return {
       scope: {
            customer: '=customer'
              }
       template: 'Name: {{customer.name}} Address: {{customer.address}}'
   };
 });

【讨论】：

我试过了。它打印“名称”和“地址”而不是它们的值。

【解决方案3】：

环绕

{{%  raw %}} ... {{% endraw %}}

【讨论】：

你能解释一下吗？我不确定你的意思。
在 nunjucks 的文档中，让 angularjs {{}} 不会被吃掉作为 nunjucks 标记，它说要围绕 html 保持原始标签不变

【解决方案4】：

对于您想要实现的目标，这可能是一个更好的模式（请注意以 JSON 格式为您的客户调用 API 的注释）。

在页面加载后通过 API 调用数据将允许您将 HTML/CSS/JAVASCRIPT 保持为完全静态文件（无模板引擎等）并与数据分离。

它将加载速度更快，并让您可以选择将您的 Web 前端完全托管在 CDN 之类的东西上（这可以释放您的 API 服务器，使其只专注于对数据/会话之类的请求）。

<DOCTYPE html>
<html ng-app="docsSimpleDirective">
  <head>
    <!-- <link rel="stylesheet" type="text/css" href="/css/text.css"> -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi"   crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
    <script   src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js">    </script><!-- Tether for Bootstrap -->
    <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.min.js"></script><!-- Bootstrap -->

  </head>
  <body>

    <h3>Select some text</h3>
    <div ng-controller="Controller">
      <div ng-repeat="customer in customers">
        <!-- not sure what 'id' or 'text' values are, you should pass them in
          via API if they are needed -->
        <div id={{i._id}} class="task" commentId = {{i._id}} get-popover- content>{{i.text}} </div>
        <div id={{i._id}} class="task" commentId = {{i._id}} my-customer="customer">{{i.text}} </div>
        <br/>
      </div >
    </div>

    <script>
      (function(angular) {
        'use strict';

        angular.module('docsSimpleDirective', [])
        .controller('Controller', ['$scope', function($scope) {

          // make a request to api to get customers in JSON format

          // assign result to scope.customers
          $scope.customers= [
            {
              name: 'Naomi',
              address: '1600 Amphitheatre'
            },
            {
              name: 'Amir',
              address: '58 W 54th st'
            }
          ];

        }])
        .directive('myCustomer', function() {
          return {
            scope: {
              myCustomer: '='
            },
            template: 'Name: {{myCustomer.name}} Address: {{myCustomer.address}}'
          };
        }); // directive
      })(window.angular);

    </script>

  </body>
</html>

您还可以通过向静态文件发出请求来模拟 REST API 服务器，如下所示：

 $http.get("./myFakeAPI.json").then(function(response){
  $scope.customers = response.data.customers;
});

“myFakeAPI.json”文件的内容在哪里：

{
  "customers":
    [
      {
        name: 'Naomi',
        address: '1600 Amphitheatre'
      },
      {
        name: 'Amir',
        address: '58 W 54th st'
      }
    ]
}

【讨论】：