여러 지시어의 범위 변수에 어떻게 액세스합니까?

위치 특성이 변경되는 사람을 나타내는 지침이 있습니다. 모든 위치에 함께 액세스하여 각도 리플릿 지시문과 같은 것을 사용하여지도에 표시하고 싶습니다. 한 곳에서 어떻게이 변수에 액세스 할 수 있습니까? 필자는 필자가 실제로 작동하도록하는 것이 거의 가깝다고 생각하지만 모든 지시어 변수에 어떤 범위가 액세스 할 수 있는지 알지 못합니다. 내가 지금까지 가지고있는 것은 무엇입니까?여러 지시어의 범위 변수에 어떻게 액세스합니까?

Index.html을

<!DOCTYPE html> 
<html ng-app="app"> 
<head> 
<meta charset=utf-8 /> 
<title></title> 

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script> 
    <script src="http://code.angularjs.org/1.2.0-rc.3/angular-resource.min.js"></script> 
    <script src="http://code.angularjs.org/1.2.0-rc.3/angular-animate.min.js"></script> 
    <script src="app.js"></script> 

</head> 

<body ng-controller='MainCtrl'> 

    <a href='' class='btn' ng-click='addPerson()'>Add new person</a><Hr> 

    <div id='people'> 
    <person lat="0.0" lng="0.0"></person> 
    <person lat="0.0" lng="0.0"></person> 
    <person lat="0.0" lng="0.0"></person> 
    </div> 
    <hr> 

    <div class="map"> <!-- this will be a directive representing a map --> 
     How do I access the lat and lon of each directive here? So I can plot them all on a map (which is also a directive ...) 
    </div> 

</body> 

</html>

App.js

var app = angular.module('app', []); 

app.directive('person', function ($compile, $timeout) { 

    function link ($scope, elem, attrs, ctrl) {  

     $scope.lat = attrs.lat; 
     $scope.lng = attrs.lng; 


     $timeout(function changePosition() { 

      console.log('Changing position ...'); 
      $scope.lat = Math.random() 
      $scope.lng = Math.random() 

      $timeout(changePosition, 2000); 
     }, 2000); 
    } 

    return { 
     restrict: 'E', 
     replace: true, 
     template: "<span>Current Lat={{lat | number:2}}, Lng={{lng | number:2}}<br><br></span>", 
     link : link, 
     scope: {}, 
    } 

}); 

app.controller('MainCtrl', function ($scope, $compile) { 

    $scope.addPerson = function() { 
      console.log('Adding new person'); 
      var lat = Math.random() 
      var lng = Math.random() 
      angular.element('#people').append($compile('<person lat="'+lat+'" lng="'+lng+'"></person>')($scope)); 
    } 


});

출처

2013-11-04 nickponline

"people"배열이 이미 MainCtrl의 $ scope에 있고 ng-repeat로 렌더링되지 않아야합니까? 사람을 추가하는 것은 단순히 배열에 밀어 넣는 것일뿐, 분명히 제거해야하는 $ compile/append 것은 아닙니다. –

당신은 지침의 범위 섹션에서 해당 변수를 정의해야합니다, 당신은 컨트롤러에서 사용하는 것처럼 당신은 링크 기능에 액세스 할 수 있습니다 .

app.directive('person', function ($compile, $timeout) { 

function link ($scope, elem, attrs, ctrl) {  

    $timeout(function changePosition() { 

     console.log('Changing position ...'); 
     $scope.lat = Math.random() 
     $scope.lng = Math.random() 

     $timeout(changePosition, 2000); 
    }, 2000); 
} 

return { 
    restrict: 'E', 
    replace: true, 
    template: "<span>Current Lat={{lat | number:2}}, Lng={{lng | number:2}}<br><br></span>", 
    link : link, 
    scope: { 
     'lat': '=', 
     'long': '=' 
    }, 
} 

})

당신은 범위 변수는 what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs에서 지시어에 작동하는 방법의 좋은 아이디어를 얻을 수 있습니다.

출처

2013-11-04 19:49:20

여러 지시어의 범위 변수에 어떻게 액세스합니까?

답변

관련 문제