AngularJS，参数不是函数，得到未定义的- ng-Sortable.js。

Question

我正在尝试使用角创建一个可折叠的文本。我发现了一个错误：

Error: [ng:areq] Argument 'ReadMoreLessCtrl' is not a function, got undefined.
http://errors.angularjs.org/1.2.19/ng/areq?p0=ReadMoreLessCtrl&p1=not%20a%20function%2C%20got%20undefined
at VALIDITY_STATE_PROPERTY (angular.js:78)
at assertArg (angular.js:1480)
at assertArgFn (angular.js:1490)
at $get (angular.js:7213)
at angular.js:6607
at forEach (angular.js:332)
at nodeLinkFn (angular.js:6594)
at compositeLinkFn (angular.js:6039)
at compositeLinkFn (angular.js:6042)
at compositeLinkFn (angular.js:6042)

我已经在chrome中选中了网络选项卡，并且在加载视图时我得到了js文件。

我使用的逻辑来自dd-折叠-文本：

https://github.com/doukasd/AngularJS-Components/tree/master/dd-text-collapse

我搞不懂它为什么一直没有定义？

EventIndexAngularController.js:

(function () {
var ReadMoreLessApp = angular.module('ReadMoreLessApp', []);

ReadMoreLessApp.controller("ReadMoreLessCtrl", ['$scope',
function ($scope) { }]);

ReadMoreLessApp.directive('ddTextCollapse', ['$compile', function ($compile) {

    return {
        restrict: 'A',
        scope: true,
        link: function (scope, element, attrs) {

            // start collapsed
            scope.collapsed = false;

            // create the function to toggle the collapse
            scope.toggle = function () {
                scope.collapsed = !scope.collapsed;
            };

            // wait for changes on the text
            attrs.$observe('ddTextCollapseText', function (text) {

                // get the length from the attributes
                var maxLength = scope.$eval(attrs.ddTextCollapseMaxLength);

                if (text.length > maxLength) {
                    // split the text in two parts, the first always showing
                    var firstPart = String(text).substring(0, maxLength);
                    var secondPart = String(text).substring(maxLength, text.length);

                    // create some new html elements to hold the separate info
                    var firstSpan = $compile('<span>' + firstPart + '</span>')(scope);
                    var secondSpan = $compile('<span ng-if="collapsed">' + secondPart + '</span>')(scope);
                    var moreIndicatorSpan = $compile('<span ng-if="!collapsed">... </span>')(scope);
                    var lineBreak = $compile('<br ng-if="collapsed">')(scope);
                    var toggleButton = $compile('<a href=""><span class="collapse-text-toggle" ng-click="toggle()">{{collapsed ? "Læs mindre" : "Læs mere"}}</span></a>')(scope);

                    // remove the current contents of the element
                    // and add the new ones we created
                    element.empty();
                    element.append(firstSpan);
                    element.append(secondSpan);
                    element.append(moreIndicatorSpan);
                    element.append(lineBreak);
                    element.append(toggleButton);
                }
                else {
                    element.empty();
                    element.append(text);
                }
            });
        }
    };
}]);
})();

My view:

    <div ng-app="ReadMoreLessApp" ng-controller="ReadMoreLessCtrl">

        @foreach (var item2 in Model)
        {
           <div class="col-md-12 table" style="display:table;">

                <div class="col-md-2 index-box">
                    <p dd-text-collapse dd-text-collapse-max-length="25" dd-text-collapse-text="@Html.Raw(Html.Encode(item2.Details).Replace("\n", "<br />"))"></p>
                </div>
            </div>
        }
    </div>

Answer 1

我想通了。显然，我对MVC视图的简单结构感到困惑。

在我的_Layout.cshtml中，我定义了另一个ng应用程序作为整个站点的应用程序。这使得它与我的问题列表中的另一个ng-app重叠，如下所示：

<div ng-app="layout-app">
  <div ng-app="ReadMoreLessApp" ng-controller="ReadMoreLessCtrl">
  </div>
</div>

因此，为了修复它，我确保它不会重叠：

<div ng-app="layout-app">
</div>
<div ng-app="ReadMoreLessApp" ng-controller="ReadMoreLessCtrl">
</div>