AngularJS ngInclude động thay đổi vị trí của nó

Tôi có một vài mẫu một phần nơi vị trí được thay đổi dựa trên hành động người dùng thông qua ng-click:AngularJS ngInclude động thay đổi vị trí của nó

<div ng-include="contentUrl"></div> 

<button ng-click="contentUrl = '../partials/testScriptForm.html'">Add Test Script</button>

này hoạt động tuyệt vời, trừ khi tôi vào nút ở trên là bên trong của bản thân một phần , vì vậy nếu testScriptForm.html có nút:

<button ng-click="contentUrl = '../partials/testScriptCase.html'">Add Test Case</button>

Sau đó, không có gì xảy ra.

Điều này có vẻ do ng-include nhận được phạm vi mới (được kế thừa nhưng không được chia sẻ?).

Điều tôi không thể hiểu là cách lấy mẫu được bao gồm (một phần) để thay đổi vị trí của riêng nó.

Tôi đã thử một hàm để thay đổi phạm vi $. $ Parent.contentUrl, dường như thay đổi nhưng không "thay đổi" các thay đổi.

Trong coffeescript:

$scope.changeParentLocation = (location) -> 
     $scope.$parent.contentUrl = location

Cũng cố gắng $ phạm vi $ apply() và $ phạm vi $ mẹ $ áp dụng() trong đó và nhận được lỗi:...

Error: [$rootScope:inprog] http://errors.angularjs.org/1.2.0rc1/ $rootScope/inprog?p0=%24apply

lẽ Tôi chỉ sử dụng sai bao gồm ...

Nguồn

2013-09-27 Steve

Hãy thử sử dụng một đối tượng ' "content.Url = 'someFile.html'"' thay vì chỉ ' "contentURL = 'someFile.html'"' – AlwaysALearner

Cảm ơn bạn! Tôi đã cố gắng tìm ra lý do tại sao ng-click không thể thay đổi mẫu bao gồm và sẽ không bao giờ đoán nó là do một phạm vi mới .. – Sonata

Thoát khỏi phạm vi bị cô lập với tham chiếu "mô hình chấm chấm":

<html ng-app> 
    <head> 
    <script src="http://code.angularjs.org/1.1.5/angular.min.js"></script> 
    <script src="script.js"></script> 

    <script type="text/ng-template" charset="utf-8" id="/partials/testScriptForm.html"> 
     <h1>This is testScriptForm.html</h1> 
     <button ng-click="tpl.contentUrl = '/partials/testScriptCase.html'">Change to Test Case</button> 
    </script> 

    <script type="text/ng-template" charset="utf-8" id="/partials/testScriptCase.html"> 
     <h1>This is testScriptCase.html</h1> 
     <button ng-click="tpl.contentUrl = '/partials/testScriptForm.html'">Change to Test Form</button> 
    </script> 

    </head> 
    <body> 

    <div ng-controller="Ctrl"> 

     <fieldset> 
     <div ng-include="tpl.contentUrl"></div> 
     </fieldset> 

    </div> 

    </body> 
</html>

function Ctrl($scope) { 
    $scope.tpl = {}; 
    $scope.tpl.contentUrl = '/partials/testScriptForm.html'; 
}

Nguồn

2013-09-27 07:42:26 Stewie

Tôi nghĩ rằng điều này cần một lời giải thích ngắn. Điều này thực sự liên quan đến cách JavaScript sẽ sao chép mọi thứ. Không có dấu chấm, chúng ta đang tham chiếu một biến vô hướng. Nếu JavaScript tạo một bản sao của nó, nó chỉ là một bản sao. Mọi thay đổi được thực hiện đối với bản sao sẽ không phản ánh trên bản gốc. Mặt khác: Nếu có dấu chấm, thì "bản sao" không phải là biến số vô hướng mà là đối tượng (tpl trong câu trả lời). Và một đối tượng được "sao chép" bằng cách tham chiếu, do đó, tpl sao chép sẽ vẫn trỏ đến đối tượng ban đầu, do đó tpl.whatever sẽ thay đổi tpl.whatever trên "gốc" là tốt. –

Nhờ tất cả những người trả lời đã giải quyết nó hoàn toàn và lời giải thích có ý nghĩa hoàn hảo. Trong thực tế, tôi đã thử một số thí nghiệm đơn giản (nghĩ rằng điều này là vì tôi đang sử dụng kiểu nguyên thủy và sao chép không tham chiếu là vấn đề) bằng cách sử dụng ng-click = "shared = {prop: 1}" vv trên các nút nhưng nó không phải là ' Làm việc ... nhưng ký hiệu chấm đơn giản là tốt ... cá nhân tôi đổ lỗi cho nó là chiều thứ Sáu tại thời điểm đăng bài;) – Steve

AngularJS ngInclude động thay đổi vị trí của nó

Trả lời

Các vấn đề liên quan