Question

我正在使用google-places指令，一切都很好，但我突然发现我的变量$ scope.location未在控制器中定义。但在视图中它是可用的吗？

有什么问题？感谢

yuppiApp.directive('googlePlaces', function(){
    return {
        restrict:'E',
        replace:true,
        scope: {location:'='},
        template: "<input id='google_places_ac' ng-model='google_map' name='map' type='text' required/>",
        link: function($scope, elm, attrs){
            var autocomplete = new google.maps.places.Autocomplete($("#google_places_ac")[0], {});
            google.maps.event.addListener(autocomplete, 'place_changed', function() {
                var place = autocomplete.getPlace();
                $scope.location = place.geometry.location.lat() + ',' + place.geometry.location.lng();
                console.log($scope.location); 
                $scope.$apply();
            });
        }
    }
});

来自视图的代码：

{{ location }}

<google-places location="location"></google-places>

来自控制器的代码：

$scope.addNew = function () {
    console.log("Location: " + $scope.location);
};

我在指令和控制器中都调用了console.log（$ scope），看起来有两个版本的$ scope。我不明白为什么。

Object { $id: "0U8", $$childTail: null, $$childHead: null, .......
Object { $id: "00M", this: Object, $$listeners: Object

Answer 1

您必须在模板中的另一个指令中使用此指令，并且该指令正在创建子范围。然后你得到两个范围，googlePlaces指令将它写入子范围，直接无法访问控制器。

更改您的代码：

再次向您的指令添加位置以成为一个独立的范围：

yuppiApp.directive('googlePlaces', function(){
    return {
        restrict:'E',
        scope: {
          location: '='
        }
        ...

来自视图的代码：

{{ data.location }}

<google-places location="data.location"></google-places>

来自控制器的代码：

$scope.data = {
 location: null
};

这样两个作用域将共享相同的对象变量。这是点'＆＃39;应用规则（所有绑定应该有一个。）。

我建议您了解控制器的controllerAs语法和指令上的隔离范围。

找不到Angular $ scope变量

1 个答案: