Question

我想将带有函数模板的JSON对象从$attr.valueAtt发送到另一个指令控制器。我决定将此变量作为内部指令元素的属性发送。问题是我的指令控制器中"[object Object]"内的对象是var value = ( [{ functionLabel:'Fun', functionTemplate: function(param1,param2){ alert(param1); }, functionParams: ['PARAM1','PARAM2'] }]);而我无法得到它：

我的代码：

angular.element(document.getElementById('space-for-modals'))
         .append($compile("<modal-dialog visible='true' data-backdrop='static' valueAtt='"+value+"'></<modal-dialog>")($scope));

然后我在控制器中添加它作为指令元素的属性：

 $scope.functions=  $attrs.valueAtt;

并尝试获得＆＃34;价值＆＃34;在我的指令控制器中：

$scope.functions

但是<UserControl x:Class="OtdrQualifTools.View.EepromView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:app="clr-namespace:OtdrQualifTools" xmlns:v="clr-namespace:OtdrQualifTools.View" mc:Ignorable="d" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#FF2D2D30" d:DesignHeight="600" d:DesignWidth="1030"> <UserControl.Resources> <HierarchicalDataTemplate x:Key="NodeTemplate"> <TextBlock x:Name="text" Text="?" /> <HierarchicalDataTemplate.ItemsSource> <Binding XPath="child::node()" /> </HierarchicalDataTemplate.ItemsSource> <HierarchicalDataTemplate.Triggers> <DataTrigger Binding="{Binding Path=NodeType}" Value="Text"> <Setter TargetName="text" Property="Text" Value="{Binding Path=Value}"></Setter> </DataTrigger> <DataTrigger Binding="{Binding Path=NodeType}" Value="Element"> <Setter TargetName="text" Property="Text" Value="{Binding Path=Name}"></Setter> </DataTrigger> <DataTrigger Binding="{Binding Path=NodeType}" Value="Document"> <Setter TargetName="text" Property="Text" Value="{Binding Path=DocumentName}"></Setter> </DataTrigger> </HierarchicalDataTemplate.Triggers> </HierarchicalDataTemplate>  <XmlDataProvider x:Key="xmlData" XPath="*" Source="E:/Projects/Irma/blah blah blah/xmlFile.xml" /> </UserControl.Resources> <Grid> <Button Command="{Binding StartCommand}" Content="Go" Margin="5" Width="100" Height="30" HorizontalAlignment="Left" VerticalAlignment="Top"/> <TreeView Margin="10,50,10,10" ItemsSource="{Binding XmlEeprom}" ItemTemplate= "{StaticResource NodeTemplate}"/>  </Grid> </UserControl>只有＆＃34; [对象]＆＃34;。有没有办法将函数模板从一个控制器发送到另一个控制器以便以后调用它？

Answer 1

问题是，当您执行valueAtt='"+value+"'时，JavaScript会将value转换为字符串 - "[object Object]"。您需要将对象存储在作用域中，然后在HTML属性中按名称引用它。像这样：

  var scope2 = scope.$new();
  scope2.foo = [{
     label:'Fun', 
     fn: function(param1, param2){
       alert("Callback function says: " + param1)
     }, 
     params: ['PARAM1', 'PARAM2']
  }];

  angular.element(document.getElementById('space-for-modals'))
     .append($compile("<modal-dialog visible='true' data-backdrop='static' value-att='foo'>Modal dialog</<modal-dialog>")(scope2));

然后在您的模态对话框链接功能中，您可以取消引用value-attr以获取foo：

link: function(scope, elem, attrs) {
  scope.functions = scope[attrs.valueAtt];
}

在对话框控制器中，您可以访问functions成员。请注意，在调用链接功能之前，这已经准备就绪，因此您需要使用手表：

  $scope.$watch('functions', function(functions) {
    if (functions == null)
      return;
    var ft = functions[0];
    ft.fn.apply(null, ft.params);
  });

Here's a demo

我必须说，像这样编译HTML有点奇怪 - 为什么不在你的指令声明中使用模板呢？如果是因为您想将内容放在DOM的另一个级别，请考虑使用service与之通信（基本上，您在共享单例对象上设置字段）。此外，您可以使用isolate scope来避免自己绑定属性。

服务可以存储将由您的控制器触发的回调函数：

.service('modalService', [function() {
  var proxy = function(message) {
    proxy.callback(message);
  };
  proxy.callback = function() {};
  return proxy;
}])

如果将其注入对话框和触发器控制器，则可以在它们之间进行通信。模态对话框应该用自己的函数替换回调。 Here's another demo

Answer 2

Okej我暂停了转换问题，但实际上我无法在主要$ scope中的静态变量中存储“value”，因为我想用它来调用具有通用功能的模态窗口，这些功能取决于存储在“value”中的函数这就是我决定将“价值”作为属性的原因。是否还有其他选项可以在视图中保存“value”或将其直接提供给指令控制器？

将带有函数的JSON对象发送到另一个指令的控制器

2 个答案: