Question

我正在阅读 Directives上的文章和隔离范围部分，我注意到了

顾名思义，指令的隔离范围是隔离的除了您已明确添加到范围的模型之外的所有内容：{} 哈希对象。这在构建可重用组件时很有用，因为它可以防止组件更改模型状态，除了您明确传入的模型。

所以我尝试了这个例子

的script.js

(function(angular) {
  'use strict';
angular.module('docsIsolationExample', [])
  .controller('Controller', ['$scope', function($scope) {
    $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
    $scope.vojta = { name: 'Vojta', address: '3456 Somewhere Else' };
  }])
  .directive('myCustomer', function() {
    return {
      restrict: 'E',
      scope: {
        customerInfo: '=info'
      },
      templateUrl: 'my-customer-plus-vojta.html'
    };
  });
})(window.angular);

其实我要找的是，如果

$scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' }; 
$scope.vojta = { sex: 'Male', something: 'Something else' }

如何打印姓名，地址（来自naomi）和性别，某事（来自vojta）

请帮忙。

Answer 1

请在此处查看演示http://plnkr.co/edit/oGOPwTqISTYrP5fwBl4t?p=preview

HTML：

 <my-customer name="vojta.name" address="vojta.address"></my-customer>

JS：

app.directive('myCustomer', function() {
    return {
      restrict: 'E',
      scope: {
        name: '=',
        address:'='
      },
      templateUrl: 'my-customer-plus-vojta.html'
    };
  });

如何使用AngularJS中的隔离范围制作可重用组件？

1 个答案: