使用一个指令从另一个隔离范围复制范围属性

时间:2014-12-08 07:04:28

标签: javascript angularjs angularjs-directive angularjs-scope angular-ui

基本上,我有一个由两种形式使用的指令。在页面加载时,每个加载由指令设置的默认属性。问题是,两个表单都需要一个复选框选项才能将相同的属性应用于另一个表单。我为每个表单都有两个单独的html模板和控制器。

return function row(ModelService) {
  return {
    restrict: 'E',
    templateUrl: function(elem, attr) {
      return elem.templateUrl;
    },
    scope: {
      formTitle: '@',
      type: '@'
    },
    link: function(scope, elem) {

      scope.setDefault = function() {
        .
        . scope settings defined here
        .
        .
        .
      }
      
      scope.close = function (action) {
        .
        . if(checked) {
        .   some code needed to apply the settings to the other form 
        . }
        .
        .
        .
      }
    };
  });
<div ng-controller="app.FirstCtrl">
  <propFilter form title="someTitle" template-url="someUrl"></propFilter>
  . 
  . multiple div elements with ng-model
  .
  .
  .
  <input id="applyToOther" type="checkbox">
</div>


<div ng-controller="app.secondCtrl">
  <propFilter form title="someTitle" template-url="someUrl"></propFilter>
  .
  . multiple div elements with ng-model
  .
  .
  .
  <input id="applyToOther" type="checkbox">
</div>

我想知道的是如果可能的话,如何使用相同的指令将范围的属性复制到另一个范围。任何帮助将非常感谢。谢谢!

1 个答案:

答案 0 :(得分:1)

您可以创建一些保存公共数据的工厂。你可以将它们注入控制器或指令,这取决于你的用例。

我创建了一些示例:

http://jsbin.com/nibufogayi/1/edit?html,js,output

HTML:

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="directiveBroadcast">
  <div ng-controller="directiveCtrl1 as ctrl1">    
    <checkboxes ng-model="ctrl1.checkboxData"></checkboxes>
  </div>
  <div ng-controller="directiveCtrl2 as ctrl2">
    <checkboxes ng-model="ctrl2.checkboxData"></checkboxes>
  </div>

<script type="text/ng-template" id="/directive.html">
  <div>Directive</div>  
  <input type="checkbox" ng-model="ngModel.checkbox1" />
  <input type="checkbox" ng-model="ngModel.checkbox2" />
</script>
</body>
</html>

JS:

angular.module('directiveBroadcast',  [])
.factory('checkboxData', function() {
  return {checkbox1 : true,
          checkbox2 : false
         };
})
.controller('directiveCtrl1', function(checkboxData){
  this.checkboxData = checkboxData;            
})
.controller('directiveCtrl2',function(checkboxData){
  this.checkboxData = checkboxData;            
})
.directive("checkboxes", function() {
  return {
    restrict: "E",
    scope: {
      ngModel: "="      
    },
    templateUrl: "/directive.html"    
  };
});

其他可能性是将它注入指令或指令

中的某些“静态”上下文