如何使可重用的组件在AngularJS使用隔离范围？ [英] How to make reusable component using Isolated Scope in AngularJS?

问题描述

我读上指令文章，并在隔离范围部分，我注意到

I am reading the article on Directives and at the Isolated Scope section, I noticed

顾名思义，该指令菌株的分离物范围
  除了车型的一切，你已经明确添加到范围：{}
  哈希对象。构建可重用的组件，因为当这是有帮助
  它$ P $更改除模型状态pvents组件
  模型您明确传递

As the name suggests, the isolate scope of the directive isolates everything except models that you've explicitly added to the scope: {} hash object. This is helpful when building reusable components because it prevents a component from changing your model state except for the models that you explicitly pass in.

所以，我想这个例子

的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);

其实我找的是，如果

Actually what I am looking for is that if

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

如何打印的姓名，地址（由娜奥米），性别，东西（从Vojta开发）

请帮忙。

推荐答案

请参阅这里演示的 http://plnkr.co/edit/oGOPwTqISTYrP5fwBl4t?p=$p$pview

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使用隔离范围？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！