Question

我在HTML页面的脚本标签内调用控制器内的一个函数，如下所示

    <script>
function initMap() {
  var scope = $('#loginDetailPage').scope();
  scope.showLocationDetail();
  console.log('scope', scope);
}
</script>
<div id="loginDetailPage" class="canvas">
  <div class="container-fluid text-center">
    <div class="row content">
      <div class="grid profile">

        <div class="col-md-8" style="text-align:right;" >
          <p><a href="" title="Change background"><i class="fa fa-pencil-square-o"> Add photos to gallery</i></a></p>
          <div class="grid-header-business">
          </div>
        </div>
        <div class="col-md-4" style="text-align:left; color:black;">
          <h3>{{vm.locationDetailObj.name}}</h3>{{vm.data.test}}
          <hr>
          <label> Address</label>
          <p>{{vm.locationDetailObj.formatted_address}}</p>
          <p>Phone: {{vm.locationDetailObj.formatted_phone_number}}</p>
          <small rating-stars rating="vm.locationDetailObj.rating"></small>
        </div>
      </div>
    </div>
  </div>
  <div class="grid-body">
    <div class="tab-content">
      <div class="tab-pane active"  id="timeline">
        <p class="lead">Location</p>
        <hr>
        <div class="row">
            <div id="map" style="width:70%;height:400px;"></div>
            <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY=places&callback=initMap"></script>
        </div>
      </div>
    </div>
  </div>
</div>

这是我在控制器中的功能

    (function() {
  angular.module('myApp').controller('locationDetailCtrl', ['$scope', 'location', '$routeParams', function ($scope, location, $routeParams){
    var vm = this;

    $scope.showLocationDetail = function() {
      vm.locationObj = location.getLocationDetail();
      var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: vm.locationObj.geometry.location.lat, lng: vm.locationObj.geometry.location.lng},
        zoom: 15
      });

      var infowindow = new google.maps.InfoWindow();
      var service = new google.maps.places.PlacesService(map);

      service.getDetails({
        placeId: vm.locationObj.place_id
      }, function(place, status) {
        vm.locationDetailObj = place;
        console.log('place: ', vm.locationDetailObj);
        if (status === google.maps.places.PlacesServiceStatus.OK) {
          var marker = new google.maps.Marker({
            map: map,
            position: place.geometry.location
          });
          google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +
            'Place ID: ' + place.place_id + '<br>' +
            place.formatted_address + '</div>');
            infowindow.open(map, this);
          });
        }
      });
    }
  }]);
})();

这里Data Binding不适用于$ scope.showLocationDetail函数内的变量。但是如果我在showLocationDetail函数之外的$ scope对象上写任何东西，数据绑定就会按预期工作。

PS：我从HTML页面中的脚本标记调用$ scope.showLocationDetail。

Answer 1

这是对我认为你想做的事情的尝试。

// index.html
<html ng-app="app">
    <!-- Some html stuff -->
    <div id="loginDetailPage" ng-controller="LoginController">
        some stuff
        {{ test() }}
        {{ data.greet }}
    </div>
</html>

在您的控制器文件中

// LoginController.js
angular.controller("LoginController",
    function LoginController($scope) {
        $scope.data = {};
        $scope.test = function() {                            
            $scope.data.greet = "Hello";
        }
    }
);

这应该有效，你需要调用函数test。 data.greet没有显示任何内容，因为它从未附加到$scope。在你的例子中从未调用$scope.test()。

另外，我不会将jQuery与Angular结合使用。

Answer 2

我的变量并未添加角度表。这是因为我从我使用jQuery的范围对象中调用我的控制器内的函数。所以我使用下面的代码将变量添加到角度监视列表

$scope.$apply(function() {
    vm.test = "Success";
    vm.locationDetailObj = place;
 });

它按预期工作。

从脚本标记调用控制器内的函数时，数据绑定不起作用

2 个答案: