Question

在角度js中，我构建了一个导航树。单击左侧导航链接，我想在页面中加载数据（它是静态数据，我必须从json文件读取并显示）。但是，我无法通过单击leftnav进行函数调用。

HTML代码：

<div class="collapse-toggler"><collection collection='tasks'></collection</div>

<div id="articleContent">{{articleContent}}</div>

JS文件：

app.directive('collection', function() {
    return {
        restrict: "E",
        replace: true,
        scope: {
            collection: '=',
            articleData: '=',
            articleContent: '='
        },
        template: "<ul><member ng-repeat='member in collection' member='member' article-data='articleData' article-content='articleContent'></member></ul>"
    }
});
app.directive('member', function($compile) {
    return {
        restrict: "A",
        replace: true,
        scope: {
            member: '=',
            articleData: '=',
            articleContent: '='
        },
        template: "<div><li><a ng-href='#' ng-click='getArticleContent()'>{{member.title}}</a></li></div>",
        link: function(scope, element, attrs) {
            scope.getArticleContent = function() {
                scope.articleContent = articleData[0].getArticleResponse.articleDetail.articleContent;
            }

            if (angular.isArray(scope.member.tocItem)) {
                if (scope.member.hasChildren == "true") {
                    for (var i = 0; i < scope.member.tocItem.length; i++) {
                        if (scope.member.tocItem.title) {
                            scope.member.tocItem.title.hide = true;
                        }
                    }
                }
                element.append("<collection collection='member.tocItem'></collection>");
                $compile(element.contents())(scope)
            }
        }
    }
});

app.controller('apdController', function($scope, getTocService) {
    var sampdata = getTocService.getToc('bookid-1');
    $scope.tasks =sampdata;

    $scope.getArticleContent = function(){
        alert('hello');
        $scope.articleContent = articleData[0].getArticleResponse.articleDetail.articleContent;
    };
});

我能够在链接功能中设置articleContent数据，但无法传回html。当我尝试在控制器中设置它时，我无法进行函数调用。

浏览器控制台没有错误。我没有弄错我的意思。有人可以指出来吗？

Answer 1

我认为这里有三个问题。

一个是这一行：

scope.articleContent = articleData[0].getArticleResponse.articleDetail.articleContent;

您正在尝试覆盖父作用域的articleContent，但是这样您只需在子作用域上设置新值。有关范围继承，请参阅示例this article。

解决方案是使articleContent成为另一个不需要覆盖的对象的属性。在您的控制器中，设置：

$scope.articleContent = {};

像这样修改您的HTML：

<div id="articleContent">{{articleContent.content}}</div>

最后是指令中的setter函数：

scope.getArticleContent = function() {
    scope.articleContent.content = articleData[0].getArticleResponse.articleDetail.articleContent;
}

第二个问题（我不确定为什么之前没有在浏览器控制台中产生错误）是指articleData它应该是scope.articleData。因此，指令中的代码实际上应该是：

scope.getArticleContent = function() {
    scope.articleContent.content = scope.articleData[0].getArticleResponse.articleDetail.articleContent;
}

第三个问题是您实际上没有将articleData对象传递给您的指令，因此会抛出错误，因为无法访问scope.articleData[0]。

Answer 2

在我能够找到使用$parent

的解决方案之后，我花了很多时间来理解如何从指令中更改控制器对象

考虑控制器中的变量：

$scope.sampleVariable = 'hello' ;

并且你需要在link:

中执行此操作

scope.$parent.sampleVariable = 'Hello from directive';

无法将指令中的数据传递给angularjs中的html

2 个答案: