2017-06-21 53 views
0

我是Angular的新手,並且一直試圖在我的網站上實現Bootstrap Angular toggle功能/模塊。實施Bootstrap Angular toggle

鏈接網站上有文檔,但完整的工作示例(例如小型獨立小提琴)無處可查。我不能讓此功能在所有的工作,所以我裝起來的資源,並取得了什麼,我一直在嘗試一個JS-小提琴:

example-fiddle

,或者如果你喜歡就看在代碼:

<script>angular.module('myApp', ['ui.toggle']);</script> 

<div ng-app="myApp"> 
    <toggle ng-model="toggleValue" ng-change="changed()"></toggle> 
</div> 

任何人都熟悉的角度或許可以在10秒內工作了這一點,但我剛開始似乎並不能找到很好的例子可以借鑑。
我在哪裏錯了,html調用或依賴聲明(或兩者)?

+0

更新小提琴現在的工作,如果有人需要一個簡單的例子 – Dilfa

回答

1

我看到引導程序切換的cdn​​地址在您的小提琴中引用不正確。

我抓住了正確的地址,以便在引導切換網站上引用chrome開發工具中的js和css文件。

我認爲從您的應用程序下載引導切換文件並在本地引用它們會更安全。

將以下內容粘貼到您的小提琴中,它將起作用。


 

 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
    <html> 
 
    <link href="https://ziscloud.github.io/angular-bootstrap-toggle/css/angular-bootstrap-toggle.min.css" 
 
        rel="stylesheet">    
 
    <script src="https://ziscloud.github.io/angular-bootstrap-toggle/js/angular-bootstrap-toggle.min.js"></script> 
 

 
    <script>angular.module('myApp', ['ui.toggle'])</script> 
 
    <body ng-app="myApp"> 
 
     <div> 
 
     <toggle ng-model="toggleValue" ng-change="changed()"></toggle> 
 
     It's not working! What should I do? 
 
     </div> 
 
    </body> 
 

 
    </html>

+0

我明白了,我忘了換「{}版」在我使用的是角版本的鏈接(在這種情況下,1.6.4)。那麼,非常感謝你的時間,我很感激。 – Dilfa

+0

實際上,這種交換可能不起作用,但我明白了,使用適當的資源 – Dilfa

+0

將上述腳本和樣式表文件(github的)添加到我的角度項目V1.5.8工作。 – Ahsan