JavaScript 指令没有像我想象的那样工作

Question

    (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' };
  }])
  .controller('testController', ['$scope', function($scope) {
    $scope.test.name = customerInfo.name;

  }])
  .directive('myCustomer', function() {
    return {
      restrict: 'E',
      scope: {
        customerInfo: '=info'
      },
      templateUrl: 'my-customer-iso.html',
      controller: 'testController'
    };
  });
})(window.angular);

我在控制器 A 中有值（在 Plunker 示例中，'Controller'），我想通过使用 a指示。标准的编程经验会让我考虑像我在 Plunker 中尝试的那样去做，但是当我查看运行结果时，我没有得到我想要的功能。

什么给了？

Answer 1

scope 标签直接注入对象而不需要单独的控制器，除非你需要在指令中有自定义逻辑。

如果它只是为了显示和结构，这应该让您朝着正确的方向前进。

(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: {
        customerInfo: '=info'
      },
      template: 'Name: {{customerInfo.name}} Address: {{customerInfo.address}}'
    };
  });
})(window.angular);


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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


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

Answer 2

Link to plunker

您只是错过了将 $scope 添加到 customerInfo

 $scope.test.name = $scope.customerInfo.name;

JavaScript 指令没有像我想象的那样工作

JavaScript directive not working like I would imagine it should

javascript

angularjs

controller

directive