Url của hộp thoại không hoạt động với angular.bootstrap (infinite $ digest Loop)

Question

Tôi có một trang web xếp chồng trung bình. Tôi muốn sử dụng ExecuteFunction để ràng buộc một nút để khởi động trang web này trong một hộp Dialog:

function doSomethingAndShowDialog(event) { 
    clickEvent = event; 
    Office.context.ui.displayDialogAsync("https://localhost:3000/try", {}, function() {}) 
} 

Nhấp vào nút mở ra một hộp thoại với các url sau, nó hiển thị các nội dung của trang:

https://localhost:3000/try?_host_Info=excel|web|16.00|en-us|7fe9b4e9-d51e-bea5-d194-c817bc5ed4bc|isDialog#%2Ftry%3F_host_Info=excel%7Cweb%7C16.00%7Cen-us%7C7fe9b4e9-d51e-bea5-d194-c817bc5ed4bc%7CisDialog 

Tuy nhiên, trong giao diện điều khiển, có Error: $rootScope:infdig Infinite $digest Loop tại angular.bootstrap(document, ['myapp']):

var wait = setTimeout(myFunction, 1000); 
Office.initialize = function (reason) { 
    $(document).ready(function() { 
     angular.bootstrap(document, ['myapp']) 
     console.log("bootstrapped inside Office.initialize"); 
     clearTimeout(wait); 
    }) 
} 

function myFunction() { 
    $(document).ready(function() { 
     angular.bootstrap(document, ['myapp']) 
     console.log("bootstrapped outside Office.initialize"); 
    }) 
} 

app = angular.module("myapp", []); 
app.config(...); 
app.controller(...); 

Nếu chúng ta chỉ cần mở https://localhost:3000/try trong một trình duyệt r, không có lỗi.

Có ai biết tại sao url dài đó không hoạt động với angular.bootstrap không? Làm thế nào chúng ta có thể sửa lỗi này?

Chỉnh sửa 1: ảnh chụp màn hình của bảng điều khiển cho https://localhost:3000/try?_host_Info=excel.... Lưu ý rằng không phải bootstrapped inside Office.initialize cũng không phải bootstrapped outside Office.initialize được hiển thị. Nhưng nếu tôi chạy https://localhost:3000/try trong trình duyệt, tôi sẽ chỉ thấy bootstrapped outside Office.initialize, khi tôi gọi nó từ một ứng dụng khách Excel, tôi sẽ chỉ thấy bootstrapped inside Office.initialize.

Answer 1

Có vẻ như bạn đang cố gắng để dây lên một trang mà có thể hoạt động như hoặc là một add-in hay một trang độc lập. Bất cứ khi nào có thể, tốt nhất là duy trì các chế độ xem riêng biệt cho từng trường hợp sử dụng. Nếu không có gì khác, nó làm cho mọi thứ tiến thẳng hơn. Kết hợp chúng có khả năng tạo ra nhiều chi phí và đau đầu hơn rất nhiều.

Một phần vấn đề của bạn ở đây là bạn có hai đường dẫn mã riêng biệt và bạn giả sử chỉ có một đường dẫn sẽ thực hiện tại một thời điểm. Khi được tải trong trình duyệt, điều này đúng, nó sẽ đơn giản bỏ qua hàm Office.initialize. Khi được nạp trong Office, nó sẽ thực thi cả hai đường dẫn. Một sẽ được thực hiện bởi văn phòng, người kia sẽ được thực hiện bởi setTimeOut sau 1 giây.

Nếu bạn có hai đường dẫn mã riêng biệt nơi chỉ có một đường dẫn được thực thi, bạn cần kiểm tra để xác định xem bạn có đang hoạt động dưới dạng bổ trợ hoặc dưới dạng trang độc lập hay không. Đây là nơi các tham số truy vấn đó được phát. Nếu bạn có thông số truy vấn _host_Info được xác định thì bạn đang hoạt động trong Office. Ví dụ:

if (getParameterByName('_hostInfo')) { // _hostInfo is defined 
    Office.initialize = function (reason) { 
     $(document).ready(function() { 
      angular.bootstrap(document, ['myapp']) 
      console.log("bootstrapped inside Office.initialize"); 
     }); 
    } 
} 
else { // _hostInfo is not defined 
    $(document).ready(function() { 
     angular.bootstrap(document, ['myapp']) 
     console.log("bootstrapped outside Office.initialize"); 
    }) 
} 

Lưu ý rằng getParameterByName() đây là một chức năng kéo từ this answer. Bạn có thể sử dụng bất kỳ phương pháp nào bạn thích.