数据绑定不工作

我打电话HTML页面内从内script标签控制器的功能如下数据绑定不工作

<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); 
      }); 
     } 
     }); 
    } 
    }]); 
})();

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

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

来源

2017-08-22 ot954

你的html的'ng-controller'指令在哪里？ – JustinJmnz

@JustinJmnz我没有写完整的代码。我正在使用ng-route。它获取模板并初始化控制器。我在控制器的测试功能之外写了任何东西，它正在按预期工作 – ot954

什么是'数据'？您无法将属性添加到未定义的内容。 – JustinJmnz

这里的企图是什么，我认为你正在试图做的..

// 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结合。

来源

2017-08-22 19:36:47 JustinJmnz

我把调试器放在$ scope.test（）中。它被称为。我已经检查过这些东西 – ot954

另外我需要从脚本标记中定义的函数调用控制器 – ot954

您可以编辑您的问题以提供更多信息。我不知道'$（“＃loginDetailPage”）。scope（）;'应该做什么。 – JustinJmnz

我的变量没有加在角度表上。这是因为我从我使用jQuery的范围对象调用控制器内部的函数。所以我用下面的代码将变量添加到角度观察列表中

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

它按预期工作。

来源

2017-08-22 20:17:24 ot954

数据绑定不工作

回答

相关问题