2014-11-12 5 views
0

Я пытаюсь настроить простое приложение SP с помощью angularjs, bootstrand и ui bootstrap, код - скопировать пасту из примера Alert Directive на пользовательский бутстрап (намерение состояло в том, чтобы проверить, работает ли хотя бы простая вещь), но его нет.

МОЙ код SP Страница:

<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%> 

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %> 

<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 

<%-- The markup and script in the following Content element will be placed in the <head> of the page --%> 
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server"> 
    <script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script> 
    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script> 
    <script type="text/javascript" src="/_layouts/15/sp.js"></script> 
    <meta name="WebPartPageExpansion" content="full" /> 

    <!-- Add your CSS styles to the following file --> 
    <link rel="Stylesheet" type="text/css" href="../Content/App.css" /> 

    <!-- Add your JavaScript to the following file --> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> 
    <script src="../Scripts/bootstrap.js"></script> 
    <script src="../Scripts/angular-ui/ui-bootstrap-tpls.js"></script> 
    <script type="text/javascript" src="../Scripts/App.js"></script> 
</asp:Content> 

<%-- The markup in the following Content element will be placed in the TitleArea of the page --%> 
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server"> 
    AngularJS - Sharepoint List CRUD Sample 
</asp:Content> 

<%-- The markup and script in the following Content element will be placed in the <body> of the page --%> 
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server"> 

    <div class="container" ng-app="ui.bootstrap.demo"> 
     <div ng-controller="AlertDemoCtrl"> 
      <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert> 
      <button class='btn btn-default' ng-click="addAlert()">Add Alert</button> 
     </div> 
    </div> 

</asp:Content> 

Моего app.js

'use strict'; 
angular.module('ui.bootstrap.demo').controller('AlertDemoCtrl', function ($scope) { 
    $scope.alerts = [ 
     { type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' }, 
     { type: 'success', msg: 'Well done! You successfully read this important alert message.' } 
    ]; 

    $scope.addAlert = function() { 
     $scope.alerts.push({ msg: 'Another alert!' }); 
    }; 

    $scope.closeAlert = function (index) { 
     $scope.alerts.splice(index, 1); 
    }; 
}); 

Я получаю 2 ошибки в названии

я полагаю что-то перепутались в порядке JS файлы?

+0

В файле appjs, первая линия, определить модуль angular.module ('ui.bootstrap.demo ', []); – Asik

ответ

0

изменить определение модуля для

 angular.module('ui.bootstrap.demo', [ui.bootstrap])..... 

вам нужно добавить ui.bootstrap как зависимость

+0

на самом деле ошибка исчезла, если я использую [] вместо [ui.bootstrap], однако я не вижу хорошо разработанных предупреждений. (но функциональность btn ng-click отлично работает) –

Смежные вопросы