隔离范围如何" @"工作?

时间:2016-01-25 19:03:50

标签: javascript angularjs

我正在搞乱Angular关于指令的文档,并希望这可以工作:

我想我可以使用" @"来获取info属性。但它似乎不起作用,我期待显示info.name和info.address表达式,但它们是空白的。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example16-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
  <script src="app.js"></script>

</head>
<body ng-app="docsIsolateScopeDirective">
  <div ng-controller="Controller">
  <my-customer info="naomi"></my-customer>
  <hr>
  <my-customer info="igor"></my-customer>
</div>
</body>
</html>

app.js

(function(angular) {
  'use strict';
angular.module('docsIsolateScopeDirective', [])
  .controller('Controller', ['$scope', function($scope) {
    $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
    $scope.igor = { name: 'Igor', address: '123 Somewhere' };
  }])
  .directive('myCustomer', function() {
    return {
      restrict: 'E',
      scope: {
        info: '@'
      },
      templateUrl: 'my-customer-iso.html'
    };
  });
})(window.angular);

MY-客户iso.html

Name: {{info.name}} Address: {{info.address}}

2 个答案:

答案 0 :(得分:0)

实际上,'隔离范围'意味着最简单地为指令创建子范围。范围本身与当前控制器正在运行的范围根本不同。

我也遇到了Isolate Scope的问题。这article/tutorial给了我很多帮助。

答案 1 :(得分:0)

似乎@似乎总是期望一个字符串,或者将您分配的属性转换为字符串,因此info.name将不会呈现,因为字符串“naomi”上没有.name属性