栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

在指令之间共享数据

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

在指令之间共享数据

您可以创建一个工厂,该工厂可以传递给每个指令或控制器。这样可以确保在任何给定时间只有一个数组实例。编辑:这里唯一的陷阱是确保您在指令作用域上设置引用类型,而不是原始类型,否则最终将在每个作用域中复制值。

这是Plnkr.co上的示例

app.controller('MainCtrl', function($scope, dataService) {  $scope.name = 'World';  //set up the items.  angular.copy([ { name: 'test'} , { name: 'foo' } ], dataService.items);});app.directive('dir1', function(dataService){  return {    restrict: 'E',    template: '<h3>Directive 1</h3>' +     '<div ng-repeat="item in data.items">' +       '<input type="text" ng-model="item.name"/>' +     '</div>',    link: function(scope, elem, attr) {      scope.data = dataService;    }  };});app.directive('dir2', function(dataService){  return {    restrict: 'E',    template: '<h3>Directive 2</h3>' +     '<div ng-repeat="item in data.items">' +       '<input type="text" ng-model="item.name"/>' +     '</div>',    link: function(scope, elem, attr) {      scope.data = dataService;    }  };});app.directive('dir3', function(dataService){  return {    restrict: 'E',    template: '<h3>Directive 3</h3>' +     '<div ng-repeat="item in data.items">' +       '<input type="text" ng-model="item.name"/>' +     '</div>',    link: function(scope, elem, attr) {      scope.data = dataService;    }  };});app.factory('dataService', [function(){  return { items: [] };}]);

HTML

  <dir1></dir1>  <dir2></dir2>  <dir3></dir3>


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/406507.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号