Question

是否可以从控制器外部设置控制器的$ scope变量？

例如，如果我有一个控制器：

app.controller('citySelectCtrl', ['$scope',function($scope){

}]);

全局范围内具有事件处理程序的函数。现在我想在事件发生时设置$scope变量。可能吗？我的全球职能：

function initAutocomplete() {
    autocomplete = new google.maps.places.Autocomplete(
        /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
        {
            componentRestrictions: {'country': 'in'},
            types: ['(cities)']
        });
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 22.5937, lng: 78.9629},
        zoom: 5,
        minZoom: 5
    });
}

autocomplete.addListener('place_changed', function() {
    infowindow.close();
    marker.setVisible(false);
    var place = autocomplete.getPlace();
    if (!place.geometry) {
      window.alert("Autocomplete's returned place contains no geometry");
      return;
    }

    // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17);  // Why 17? Because it looks good.
    }
----------------------------------------------------------
    //SET $scope.city = place here
----------------------------------------------------------
    infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
    infowindow.open(map, marker);
  });

Answer 1

我们可以使用$injector来访问范围外的Angular Services。以你为榜样。

// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
  map.fitBounds(place.geometry.viewport);
} else {
  map.setCenter(place.geometry.location);
  map.setZoom(17);  // Why 17? Because it looks good.
}
----------------------------------------------------------
    var elem = angular.element(document.querySelector('[ng-app]'));
    var injector = elem.injector();
     var $rootScope = injector.get('$rootScope');   
     $rootScope.$apply(function(){
       $rootScope.city = place //or city;
     });
----------------------------------------------------------
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.open(map, marker);
});

在您的控制器中，您可以使用。

app.controller('citySelectCtrl', ['$scope','$rootScope',
    function ($scope,$rootScope) {         
         $rootScope.city = {};

    }
]);

的 DEMO

有关详细信息，请查看this

希望这有帮助

Answer 2

使用可以像这样使用$ rootScope。

app.controller('citySelectCtrl', ['$scope', '$rootScope', function($scope, $rootScope){
    //$rootScope.city = place here;
}]);

并使用可以访问全局函数中的变量

function initAutocomplete() {
    //$rootScope.city = place here;
}

Answer 3

您可以尝试使用$ rootscope中的$ broadcast来通知您的控制器事件已经发生。

//rootscope
$rootscope.$broadcast("myevent",eventObjectToBePassed);

//your controller
$scope.$on("myevent",function(eventObject){

//do something

});

更简洁的方法是在服务中注入rootcope并创建一个sendEvent函数来实际执行$ rootscope。$ broadcast。

Answer 4

使用角度应用时，不应直接使用全局范围变量。建议的方法是将此功能包装在指令中，并在模板中使用该指令。这样您就可以访问$scope来更新值。 E.g：

angular.directive('mapAutoComplete', function () {
  return {
    restrict: 'E',
    link: function (scope, elem, attr) {
      // Add your map and autocomplete here

      // Now you can use the `scope` to update the $scope of the parent controller
    }
  }
});

在你的html中，使用如下指令：

<map-auto-complete></map-auto-complete>

这将使包含视图的控制器中的范围在指令

中以scope形式提供

请参阅以下有关使用directives而不是直接dom操作和可重用功能的最佳做法 http://ng-learn.org/2014/01/Dom-Manipulations/ https://stackoverflow.com/a/15012542/3878940

Answer 5

我可以考虑两种方法来做到这一点

使用$rootScope这是一种简单的方法。但如果它不是真正的全球变量，我个人不喜欢它。
编写一个Eventhandler并在控制器中监听

Answer 6

您可以使用var requiredElemScope = angular.element(ELEMENT_SELECTOR).scope();来获取元素的范围。然后，您可以将范围变量的值指定为requiredElemScope.city = someValue;

此处ELEMENT_SELECTOR是控制器附加的dom选择器。

从角度控制器外部控制器设置范围变量

6 个答案: