您好，
我正在尝试学习如何在SharePoint Hosted Add-in中使用angularJS。我也是一个有角度的新手，所以这可能是一个明显的解决方案。
无论如何，我试图将一些数据显示在表格中，但数据根本没有显示出来。我还使用{{＆＃34; test＆＃34; +＆＃34; ＆＃34; +＆＃34; angular＆＃34;}}就像测试一样。当我向div添加ng-controller属性时，broswer输出{{＆＃34; test＆＃34; +＆＃34; ＆＃34; +＆＃34; angular＆＃34;}}但是当删除属性时它会起作用（显示为：测试角度）
JS代码
<!-- begin snippet: js hide: false console: true babel: false -->
/******************************************************************************
* App.js
* Author: Sam Johnson
*
* This file contains the program flow of the Root Cause Investigation (RCI)
* SharePoint application. The RCI app is used to identifying the root causes
* of faults and to track solutions to these problems cause
*
* Revisions:
*
******************************************************************************/
'use strict';
var hosturl;
var app = angular.module('rciApp', []);
// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
$(document).ready(function () {
hosturl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
$('#top-left-box').html('<a href="' + hosturl + '"><img src="../Images/Spacer.png" title="Click here to return to Treeline Home"></a>');
// initial page starts with a list of active RCI Incidents
getIncidents('Active');
getUserName();
});
function getIncidents(status) {
console.log("status: " + status);
// fake test data
app.controller('listActive',function listActive ($scope) {
$scope.RCIs[
{ number: '666-100-001', eventDate: new Date(2016, 4, 24), enteredDate: new Date(2016, 4, 26), status: 'Draft', equipDisc: 'LP Feeder Digester', outWith: 'sjohns1', reqAction: 'Submit RCI' },
{ number: '666-100-002', eventDate: new Date(2016, 4, 13), enteredDate: new Date(2016, 4, 13), status: 'Area Coordinator Approval', equipDisc: 'LP Feeder Digester', outWith: 'sjohns1', reqAction: 'Coordinator Approval' },
{ number: '666-100-003', eventDate: new Date(2016, 4, 18), enteredDate: new Date(2016, 4, 21), status: 'Draft', equipDisc: 'LP Feeder Digester', outWith: 'sjohns1', reqAction: 'Submit RCI' }
];
});
}
// This function prepares, loads, and then executes a
// SharePoint query to get the current users information
function getUserName() {
// Get context of app host
var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();
context.load(user);
context.executeQueryAsync(function success() {$('#top-right-box').html('<span class="title-text">' + user.get_title() + '<span>')},
function Fail(sender, args) { alert('Failed to get user name. Error:' + args.get_message()); });
}
// Function to retrieve a query string value.
function getQueryStringParameter(paramToRetrieve) {
var params = document.URL.split("?")[1].split("&");
var strParams = "";
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split("=");
if (singleParam[0] == paramToRetrieve)
return singleParam[1];
}
}
CSS代码
<!-- language: lang-css -->
/* Apply special formatting to the links at the top. */
body {
color: rgb(64,64,64);
}
#top-bar {
background-image: url('../Images/wfm.png');
background-repeat:no-repeat;
background-position:center;
font-family:Tahoma;
background-color:rgb(0, 135, 82);
color:rgb(255,255,255);
font-size:22px;
position: fixed;
top: 0;
left: 51px;
z-index: 998;
width:100%;
height:50px;
}
.title-text {
line-height:50px;
padding-left:10px;
padding-right:10px;
}
#top-left-box {
background: rgb(0, 109,64) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AYXEDkqUQfMuAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAmUlEQVRIx+2VQQrCMBBFnxLQZXoblx5J8AIK7b269DguIxR+N7MRnAl0US3mb+dPfibMIyjWTVKueLL5XO1ZQS3kT0MScA/qI1CAAZic/mI+VztJOagX4AVkQJ/6gSdwAI7uKRXQekldxdOZbzGMkzPB2z2dp2wrvOGQZGsaYmC+73KSgEuF+AdwDYjvgRNwXgpj+xlbyI+HzD6iPn+MTiqhAAAAAElFTkSuQmCC)
no-repeat center center;
position: fixed;
top: 0;
left: 0;
z-index: 997;
width:50px;
height:50px;
text-align:center;
}
#top-right-box {
font-family:Tahoma;
background-color:rgb(0, 135, 82);
color:rgb(255,255,255);
font-size:14px;
position: fixed;
top: 0;
right: 0;
z-index: 999;
width:250px;
height:50px;
text-align:right;
}
.content {
position:fixed;
top:80px;
left:20px;
width:100%;
}
.leftColumn {
background-color: rgb(230,230,230);
}
HTML代码
<!-- language: lang-html -->
<!DOCTYPE html>
<html data-ng-app="rciApp">
<head>
<meta name="author" content="Sam Johnson">
<meta name="description" content="The RCI app is used to identifying the root causes of faults and to track solutions to these problems cause">
<meta name="keywords" content="RCI, Root Cause Investigation">
<!-- Specifying legacy document modes -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Add 3rd party javascript libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
<script type="text/javascript" src="/_layouts/15/init.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript" src="/_layouts/15/SP.UserProfiles.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Add custom CSS styles for this app -->
<link rel="Stylesheet" type="text/css" href="../Content/App.css">
<!-- Add custom JavaScripts for this app -->
<script type="text/javascript" src="../Scripts/App.js"></script>
<title>Root Cause Investigation</title>
</head>
<body>
<div id="top-left-box"></div>
<div id='top-bar'><span class="title-text">Root Cause Investigation</span></div>
<div id="top-right-box"></div>
<div id="chrome_cntrl_container"></div>
<div class="content">
<div id="container-fluid">
<div class="row">
<div class="col-sm-2 leftColumn">
<!-- The following content will be replaced with the user name when you run the app - see App.js -->
<h2>Menu</h2><h2>{{"test" + " " + "angular"}}</h2>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
<div class="col-sm-10" data-ng-controller="listActive">
<img src="../Images/AppIcon.png" alt="RCI" >
<h2>{{"test" + " " + "angular"}}</h2>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Number</th>
<th>Event Date</th>
<th>Entered Date</th>
<th>Status</th>
<th>Equipment Discription</th>
<th>Out With</th>
<th>Required Action</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="rci in RCIs">
<td>{{ rci.number }}</td>
<td>{{ rci.eventDate | date:'MM/dd/yyyy }}</td>
<td>{{ rci.enteredDate | date:'MM/dd/yyyy }}</td>
<td>{{ rci.status }}</td>
<td>{{ rci.equipDisc }}</td>
<td>{{ rci.outWith }}</td>
<td>{{ rci.reqAction }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
请帮帮我。我错过了什么？
答案 0 :(得分：0)
您在错误的位置设置控制器，并且阵列中出现语法错误。请参阅此plunker http://plnkr.co/edit/JLUe9U1UQKDNzIWzXhLn?p=preview
var app = angular.module('rciApp', []);
app.controller('listActive',function listActive ($scope) {
$scope.RCIs=[
{ number: '666-100-001', eventDate: new Date(2016, 4, 24), enteredDate: new Date(2016, 4, 26), status: 'Draft', equipDisc: 'LP Feeder Digester', outWith: 'sjohns1', reqAction: 'Submit RCI' },
{ number: '666-100-002', eventDate: new Date(2016, 4, 13), enteredDate: new Date(2016, 4, 13), status: 'Area Coordinator Approval', equipDisc: 'LP Feeder Digester', outWith: 'sjohns1', reqAction: 'Coordinator Approval' },
{ number: '666-100-003', eventDate: new Date(2016, 4, 18), enteredDate: new Date(2016, 4, 21), status: 'Draft', equipDisc: 'LP Feeder Digester', outWith: 'sjohns1', reqAction: 'Submit RCI' }
];
});