Angularjs:如何在Directive中读取对象

时间:2015-05-19 11:07:48

标签: angularjs angularjs-directive angularjs-scope

我已经从控制器传递了一个对象到指令但是当我在指令中读取对象时我无法进行,它似乎在指令对象中被读为字符串。编码在下面,我想从城市和州读取对象

Html File

<div ng-controller="WeatherController">    
<div weather ng-object="{{Object}}"></div>
</div>

Controller
.controller('WeatherController', ['$scope', function ($scope) {
   $scope.webpartData.OverviewData.Person.Address.City;
            $scope.Object = {
                City: '',
                State: ''
            };
            $scope.Object.City = 'TestCity';
            $scope.Object.State = 'TestState';         
        });
    })
}])


Directive


angular.module('WeatherModule', [])
.directive('Weather', ["$timeout", function($timeout) {
    return {
        restrict: 'EA',
        template: '<div id="weather"></div>',
        scope: {
            ngObject: '@ngObject'
        },
        link: function(scope, element, attrs) {
            scope.$watch('ngObject', function(value) {
                scope.ngObject = value;
            });
            $timeout(function() {
                console.log('Location' + scope.Object.City + ',' + scope.Object.State);
            }, 100);
        }
    };
}])

2 个答案:

答案 0 :(得分:6)

引用指令范围成员时@, = and &之间存在差异。

 1. "@"   (Text binding / one-way binding)
 2. "="   (Direct model binding / two-way binding)
 3. "&"   (Behaviour binding / Method binding)

@表示来自控制器范围的更改将反映在指令范围中,但如果修改指令范围中的值,则控制器范围变量不会受到影响

@始终要求映射属性为表达式。这是非常重要的;因为要使“@”前缀起作用,我们需要将属性值包装在{{}}内。

=是双向的所以如果更改指令范围内的变量,控制器范围变量也会受到影响

<强>&安培;用于绑定控制器范围方法,以便在需要时可以从指令

中调用它

在您的情况下,您可能需要使用=代替@

看看下面这个小提琴(它不是我的,但它有好的,也有点插图)http://jsfiddle.net/maxisam/QrCXh/

还有一些相关问题:

答案 1 :(得分:1)

您应该使用“=”代替“@”。并且ng-object =“Object”而不是ng-object =“{{Object}}”。