Angularjs：如何在指令中读取对象

11 浏览
0 Comments

Angularjs：如何在指令中读取对象

我已经将一个对象从控制器传递给指令，但是当我在指令中读取对象时却无法成功，看起来在指令中对象被读取为字符串。代码如下，我想要从对象中读取City和State。\nHTML文件：\n控制器：\n.controller(\'WeatherController\', [\'$scope\', function ($scope) {\n $scope.webpartData.OverviewData.Person.Address.City;\n $scope.Object = {\n City: \'\',\n State: \'\'\n };\n $scope.Object.City = \'TestCity\';\n $scope.Object.State = \'TestState\'; \n });\n })\n}])\n指令：\nangular.module(\'WeatherModule\', [])\n.directive(\'Weather\', [\"$timeout\", function($timeout) {\n return {\n restrict: \'EA\',\n template: \'\',\n scope: {\n ngObject: \'@ngObject\'\n },\n link: function(scope, element, attrs) {\n scope.$watch(\'ngObject\', function(value) {\n scope.ngObject = value;\n });\n $timeout(function() {\n console.log(\'Location\' + scope.Object.City + \',\' + scope.Object.State);\n }, 100);\n }\n };\n}])

0

2 答案

0 Comments

问题的出现原因是使用了错误的属性绑定方式以及错误的指令语法。解决方法是将属性绑定方式改为"="，指令语法改为ng-object="Object"。

首先，让我们来看一下问题的具体描述。问题是关于在AngularJS中如何在指令中读取对象的。下面的代码展示了一个错误的做法：

在这个例子中，我们在指令中使用了错误的指令语法和属性绑定方式。因此，我们需要找到问题的原因并提供解决方法。

首先，我们需要将属性绑定方式改为正确的方式。在这种情况下，我们应该使用"="来进行双向绑定。因此，我们需要修改代码为：

接下来，我们需要修改指令的语法。在指令中，我们应该使用ng-object来接收对象。因此，我们需要修改代码为：

app.directive("myDirective", function() {
  return {
    restrict: "E",
    scope: {
      ngObject: "="
    },
    template: "
{{ngObject}}
"
  };
});

现在，我们已经找到了问题的原因并提供了解决方法。我们将属性绑定方式改为"="，并将指令语法改为ng-object="myObject"。这样，我们就可以在指令中正确地读取对象了。

希望这篇文章对你有帮助！

0
0 Comments

AngularJS中的指令作用域成员引用方式@, =, &之间存在差异。

 1. "@"   (文本绑定 / 单向绑定)
 2. "="   (直接模型绑定 / 双向绑定)
 3. "&"   (行为绑定 / 方法绑定)

@表示控制器作用域的更改将反映在指令作用域中，但如果在指令作用域中修改值，控制器作用域变量不会受到影响。

@始终希望映射的属性是一个表达式。这非常重要，因为要使“@”前缀起作用，我们需要将属性值包装在{{}}中。

=是双向的，因此如果在指令作用域中更改变量，控制器作用域变量也会受到影响。

&用于绑定控制器作用域方法，以便在需要时可以从指令中调用它。

在您的情况下，可能需要使用=而不是@

请查看以下fiddle（不是我创建的，但它有很好且直观的说明）http://jsfiddle.net/maxisam/QrCXh/

一些相关问题：

0