从单独的指令修改指令范围中的值

比方说，我有一个图表指令（如饼图）和一个包含用于修改图表指令设置的表单的设置指令。设置指令显示在模态对话框中。从单独的指令修改指令范围中的值

如何使设置指令中的更改在图表指令中生效？

可以有多个图表指令，每个图表指令都有独立的设置。每个图表的设置实际上都会在设置模式中显示为选项卡，但为了保持示例简单，我省略了这些设置。

这里有一些事情我已经试过/考虑：

“使用工厂共享的设置值。”这失败了，因为我可能有多个图表指令，每个都有独立的设置。

“让设置指令成为图表指令的子项。”设置指令不能是图表指令的子元素，因为它需要在模态中呈现。

Here is a plunkr沿W /一些相关片段：

<div ng-controller="Controller"> 
    <a href ng-click="showSettings()">Settings</a> 
    <chart></chart> 
    <chart></chart> 
</div>

JS：

app.controller("Controller", function ($scope, $modal) { 
    $scope.showSettings = function() { 
     $modal.open({ 
        scope: $scope, 
        template: "<h1>Settings Modal</h1><settings></settings>" 
       } 
     ); 
    } 
}); 

app.directive("chart", function() { 
    return { 
     restrict: 'E', 
     template: '<h1>Chart Directive</h1><p>someChartSetting: {{someChartSetting}}</p>', 
     controller: function ChartController($scope) { 
      // This value represents a setting that I need to modify via the settings modal. 
      $scope.someChartSetting = "on"; 
     } 
    } 
}) 

app.directive("settings", function() { 
    return { 
     restrict: 'E', 
     template: '<a href ng-click="toggleSettings()">Toggle someChartSetting</a>', 
     controller: function SettingsController($scope) { 
      $scope.toggleSettings = function() { 
       console.log("Toggle clicked"); 
       // This is where I need to modify the someChartSetting value from chart. 
      } 
     } 
    } 
})

来源

2014-10-30 Bob B

你能不能给每个图表au nique ID，然后将设置存储在关联数组/对象内的工厂内，其中键与图表ID相符？所以在你申报图表的地方，可以使用 – romiem 2014-10-31 11:16:06

。我确实考虑到了这一点，但感觉有点ha。。这些指令是分布在更大的应用程序框架中的，因此跟踪ID可能会令人讨厌。我希望能够直接将设置指令与图表指令相连接。你的建议虽然会起作用。 – 2014-10-31 13:33:04

没有ID，这表明这些设置需要保存在Chart实例本身的内部。也许值得建立一个BaseModal指令，然后有一个从BaseModal派生的ChartSettingsModal。假设用于触发模式可见性的按钮存在于Chart指令中，则可以调用ChartSettingsModal控制器的show方法（通过require属性），其中包含所有相关设置。 – romiem 2014-10-31 13:58:05

试试这个我希望它能帮助：

<!DOCTYPE html> 
<head> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.min.js"></script> 
</head> 

<body ng-app="app"> 
<div ng-controller="Controller"> 
    <a href ng-click="showSettings()">Settings</a> 
    <chart></chart> 
    <chart></chart> 
</div> 

<script> 
    var app = angular.module("app", ['ui.bootstrap']); 

    app.controller("Controller", function ($scope, $modal) { 
     $scope.showSettings = function() { 
      $modal.open({ 
         scope: $scope, 
         template: "<h1>Settings Modal</h1><settings></settings>" 
        } 
      ); 
     } 
    }); 

    app.directive("chart", function() { 
     return { 
      restrict: 'E', 
      template: '<h1>Chart Directive</h1><p>someChartSetting: {{someChartSetting}}</p>', 
      controller: function ChartController($scope) { 
       // This value represents a setting that I need to modify via the settings modal. 
       $scope.someChartSetting = "on"; 
      } 
     } 
    }) 

    app.directive("settings", function() { 
     return { 
      restrict: 'E', 
      template: '<a href ng-click="toggleSettings()">Toggle someChartSetting</a>', 
      controller: function SettingsController($scope) { 
       $scope.toggleSettings = function() { 
        // This is where I need to modify the someChartSetting value from chart. 
       } 
      } 
     } 
    }) 
</script> 

</body> 
</html>

http://plnkr.co/edit/g0oGMzlsGYaSkumh4aho?p=preview

来源

2014-10-30 14:06:17

感谢您的帮助。我看到你将设置移到了父控制器中，并且可以传递给图表和设置指令。这不是一个坏主意，但我希望尽可能多地将图表指令实现保留在父控制器之外。如果这是不可行的，那么我可能不得不去做你所拥有的。 – 2014-10-30 14:33:35

从单独的指令修改指令范围中的值

回答

相关问题