Question

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

当我浏览本地
除了我的指令中的$ 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>

Answer 1

环绕

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

Answer 2

您可以使用与isolated scope名称相同的名称为directive创建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>

Answer 3

您必须使用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}}' }; });

Answer 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'
      }
    ]
}

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

4 个答案: