从角度的部分模板渲染脚本

Question

我有一个部分模板，其中包含<script src='....'/>标记。 当用户单击按钮时，我需要以模态呈现部分模板。 所以这是我的代码：

List.html

<script src="App/controllers/detailsCtrl.js" type="text/javascript"></script>

<div class="clearfix"></div>
<h3 class="page-header">All Websites</h3>
<br />
<div ng-app="app" class="" ng-controller="listCtrl" data-ng-init="init();">
    <div class="table-responsive">
        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>
                        <a href="" ng-click="order('Name')">Name</a>
                    </th>
                    <th>
                        <a href="" ng-click="order('DisplayName')">Display Name</a>
                    </th>
                    <th>
                        <a href="" ng-click="order('DateTime')">Created On</a>
                    </th>
                    <th>
                        <a href="" ng-click="order('FK_Name')">Source Site</a>
                    </th>
                    <th>
                        <a href="" ng-click="order('State')">State</a>
                    </th>
                    <th></th>
                </tr>
            </thead>
            <tbody>

                <tr ng-repeat="website in model | orderBy:predicate:reverse | filter:paginate">
                    <td>{{website.Name}}</td>
                    <td>{{website.DisplayName}}</td>
                    <td>{{website.DateTime | creationDateFilter | date: 'dd-MM-yyyy hh:mm:ss a'}}</td>
                    <td>{{website.FK_Name | sourceSiteFilter}}</td>
                    <td>
                        <i class="fa fa-toggle-on active"
                           ng-if="website.State == 'Started'"
                           ng-click="changeState(website)">
                        </i>
                        <i class="fa fa-toggle-on fa-rotate-180 inactive"
                           ng-if="website.State == 'Stopped'"
                           ng-click="changeState(website)">
                        </i>
                    <td style="text-align:center">

                        <a href="/Replicate/Edit/{{website.Id}}" ng-disabled="{{website.Id}}==0"><i class="fa fa-pencil fa-lg"></i></a>
                        <a href="#" ng-click="showDetails(website.Name)"><i class="fa fa-book fa-lg"></i></a>

                    </td>
                </tr>
                <tr ng-if="model.length == 0">
                    <td colspan="6" class="text-center"></td>
                </tr>
            </tbody>
        </table>
        <center>
            <pagination total-items="totalItems" ng-model="currentPage"
                        max-size="5" boundary-links="true"
                        items-per-page="numPerPage" class="pagination-sm">
            </pagination>
        </center>
    </div>
</div>

listCtrl.js

//open modal and shows details of single object
    $scope.showDetails = function (websiteName) {
        var modalInstance = $modal.open({
            templateUrl: 'app/views/details.html',
            controller: 'detailsCtrl',
            resolve: {
                obj: function () {
                    return websiteFactory.getFilteredObject($scope.model, websiteName);
                }
            }
        });
    }

details.html

<div ng-controller="detailsCtrl">
    <div class="modal-header">
        <h3>Website Details</h3>
    </div>
    <div class="modal-body">
        <table class="table table-bordered" id="details">
            <thead></thead>
            <tbody>
                <tr>
                    <td>Name</td>
                    <td>{{singleObject.Name}}</td>
                </tr>
                <tr>
                    <td>Display Name</td>
                    <td>{{singleObject.DisplayName}}</td>
                </tr>
                <tr>
                    <td>Description</td>
                    <td>{{singleObject.Description}}</td>
                </tr>
                <tr>
                    <td>Created On</td>
                    <td>{{singleObject.DateTime | creationDateFilter | date: 'dd-MM-yyyy hh:mm:ss a'}}</td>
                </tr>

                <tr>
                    <td>Source Website</td>
                    <td>{{singleObject.FK_Name}}</td>
                </tr>

                <tr>
                    <td>Current State</td>
                    <td>{{singleObject.State}}</td>
                </tr>
            </tbody>

        </table>
    </div>
    <div class="modal-footer">
        <!--@*<button class="btn btn-primary" ng-click="ok()">OK</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>*@-->
    </div>
</div>

detailsCtrl.js

app.controller('detailsCtrl', ['$scope', '$modalInstance', 'obj', function ($scope, $modalInstance, obj) {
    $scope.singleObject = {
        Name: obj.Name,
        DisplayName: obj.DisplayName,
        DateTime: obj.DateTime,
        FK_Name: obj.FK_Name,
        State: obj.State,
        Description: obj.Description
    };
    $scope.close = function () {
        $modalInstance.dismiss('cancel');
    };
}]);

错误

论据＆＃39; detailsCtrl＆＃39;不是一个功能，未定义。

如果我将此脚本标记包含到index.html（我的主视图页面）。一切正常。 问题是我正在添加脚本标记，但我知道脚本没有呈现。为什么会这样？我怎样才能延迟加载脚本文件。或者我应该始终将所有js文件添加到主视图（index.html）？