2016-07-21 2 views
1

희망 : 내 앵글 페이지에 부트 스트랩 알림 추가 기능을 사용하고 싶습니다.방법 : 각도보기 페이지에서 부트 스트랩 알림 작동 중

부트 스트랩 통지 : here하고 github location

문제점 : 나는 내 인생이 작업을 진행하는 방법을 알아낼 수 없습니다! 나는 약 12 ​​(ok, maybe 6)의 스크립트 삽입 방법을 시도했지만, 그 중 하나는 에러를 제외하고는 아무 것도 안된다.

강령 :

index.aspx :

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Bootstrap.Base.Master" Inherits="System.Web.Mvc.ViewPage" %> 

<asp:Content ID="tc" ContentPlaceHolderID="TitleContent" runat="server"> 
    My awesome page! 
</asp:Content> 

<asp:Content ID="pc" ContentPlaceHolderID="PageContent" runat="server"> 
    <div id="ng-app" ng-app="myAwesomePage" ng-view growl autoscroll></div> 
</asp:Content> 

<asp:Content ID="as" ContentPlaceHolderID="AdditionalScripts" runat="server"> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> 

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-resource.min.js"></script> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-cookies.min.js"></script> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-sanitize.js"></script> 

    <script type="text/javascript" src="/scripts/bootstrap-addons/ui-bootstrap-tpls-0.8.0.min.js"></script> 
    <script type="text/javascript" src="/scripts/bootstrap-addons/jquery.bootstrap-growl.min.js"></script> 
    <script type="text/javascript" src="/scripts/bootstrap-addons/bootstrap-notify.min.js"></script> 

    <script type="text/javascript" src="/scripts/underscore-min.js"></script> 
    <script type="text/javascript" src="/scripts/moment.min.js"></script> 
    <script type="text/javascript" src="/scripts/ng-v4/ng-v4.js"></script> 

    <script type="text/javascript" src="/scripts/myAwesomePage/app.js"></script> 
    <script type="text/javascript" src="/scripts/myAwesomePage/controllers.js"></script> 
    <script type="text/javascript" src="/scripts/myAwesomePage/services.js"></script> 
</asp:Content> 

<asp:Content ID="ac" ContentPlaceHolderID="AdditionalContent" runat="server"> 
    <style type="text/css"> 
     .nav, .pagination, .carousel a { 
      cursor: pointer; 
     } 
     .pagination { 
      margin: 0 0 0 0 !important; 
      font-family: Helvetica, FontAwesome; 
     } 

     [ng-cloak] { 
      display: none; 
     } 

     label, form { 
      font-size: 10pt; 
      font-family: Verdana, Arial, Helvetica, Sans-serif; 
     } 
    </style> 
</asp:Content> 

"use strict"; 

angular.module("myAwesomePage", [ 
    "ngRoute", 
    "ngResource", 
    "ui.bootstrap", 
    "v4", 
    "bootstrapNotify", 
    "myAwesomePage.controllers", 
    "myAwesomePage.services"]). 

    config(function ($routeProvider) { 
     //Main List 
     $routeProvider.when("/", { 
      templateUrl: "/content/myAwesomePage/index.html", 
      controller: "myAwesomePageCtrl", 
      controllerAs: "vm" 
     }); 

     $routeProvider.otherwise({ redirectTo: "/" }); 
    }); 

을 app.js 내가 실행 해요 문제는이 라인이다 :

"bootstrapNotify",

나는 지시, 나는이 오류가 발생 해봤 이름의 모든 버전 주입하는 방법을 알아낼 수 없습니다

:

enter image description here

이 멋진 리드 그리고 AngularJS website에있는 친밀한 설명 페이지.

내가 해봤 "bootstrap-notify", "bootstrapnotify", "bootstrapNotify", "notify", "Notify" : 그들 모두 실패와 같은 오류를 부여했다.

도와주세요, StackOverflow! 너는 내 유일한 희망이야!

+0

angular.min.js 대신 angular.js를 사용하면 더 좋은 오류 (각도 웹 사이트에서 더 자세한 설명 페이지)를 얻을 수 있습니다. – Claies

+1

은 앵귤러 플러그인'bootstrapNotify'입니까? 나는이 addon의 각진 버전이 있음을 시사하는 어떤 참고 문헌도 찾을 수 없다. 확실히 ui-bootstrap에 포함 된 지시문 중 하나가 아닙니다. – Claies

+0

@Claies - 당연히 그렇지만, 축소 된 포함을 제외한 다른 것을 사용하지 않는 경향이 있습니다. 파일을 반복해서 스왑하는 것을 좋아하지 않습니다. :) – PKD

답변

0

위의 @ Claies 답변에서 BootstrapNotify는 각진 모듈이 아니므로 각 페이지로 실제로 작업하려면 많은 노력이 필요합니다. JQuery 중심의 페이지에서 더 많은 것을 알게되었습니다.

관련 문제