Question

我正在尝试使用angular创建可折叠文本。我收到了错误：

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-collapse-text：

中的逻辑

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);
                }
            });
        }
    };
}]);
})();

我的观点：

    <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-app作为整个网站的应用程序。这使得它在我的视图中与其他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>

AngularJS，Argument不是函数，未定义 - ng-Sortable.js

1 个答案: