從角度控制器外部控制器設置范圍變量

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 Outside Scope。 以你為榜樣。

// 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

有關詳細信息，請查看此

希望這可以幫助

Answer 2

use可以像這樣使用$ rootScope。

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

並且use可以訪問全局函數中的變量

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

Answer 3

您可以嘗試使用$ rootscope中的$ broadcast來通知您的控制器事件已經發生。

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

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

//do something

});

更簡潔的方法是在服務中注入rootscope並創建一個sendEvent函數來實際執行$ rootscope。$ broadcast。

Answer 4

使用角度應用程序時，不應直接使用全局范圍變量。 建議的方法是將此功能包裝在指令中，並在模板中使用該指令。 這樣您就可以訪問$scope來更新值。 例如：

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可用作指令中的scope

有關使用直接dom操作和可重用功能的directives最佳實踐，請參閱這些內容http://ng-learn.org/2014/01/Dom-Manipulations/ https://stackoverflow.com/a/15012542/3878940

Answer 5

我可以考慮兩種方法來做到這一點

1. 使用$rootScope這是一種簡單的方法。 但如果它不是真正的全局變量，我個人並不喜歡它。

2. 編寫一個Eventhandler並在控制器中監聽

Answer 6

你可以使用var requiredElemScope = angular.element(ELEMENT_SELECTOR).scope(); 獲得元素的范圍。 然后你可以根據requiredElemScope.city = someValue;為范圍變量賦值requiredElemScope.city = someValue;

這里ELEMENT_SELECTOR是控制器所連接的dom選擇器。