Question

我有一个自定义指令，如下所示：

<menu-section sections="menu.sections" addons="addons"
    options="options" menu="menu.id"></menu-section>

我在这里定义了这样：

adminApp.directive("menuSection", ["$addons", function($addons) {

    var sectionController = function($scope) {
        console.log($scope);
        console.log($scope.sections);

        // Some $scope level functions defined here.
    };

    return {
        restrict: "E",
        scope: {
            sections: "=",
            options: "=",
            menu: "=",
            addons: "="
        },
        controller: sectionController,
        templateUrl: "/template/menus/menu-section.html"
    }
}]);

在模板中，我有一个选择元素。

<div ng-repeat="section in sections">
  <select ng-model="section.current_addon_ids" ng-options="addon.id as addon.name for addon in addons track by addon.id"></select>

我的问题是似乎没有设置current_addon_ids。 select正在填充，但current_addon_ids未定义。在$ scope上面的console.logs中返回一个sections数组。但是，下一行会向控制台返回“未定义”。

这里有什么奇怪的时间问题吗？我可以在一个语句中看到$ scope变量中的section数组，但在下一个语句中它是未定义的，这似乎很奇怪。

更新

我已经知道发生了什么。只是不确定如何解决它。

在页面控制器中，通过从Ajax调用获取JSON结构来设置菜单。这就是在菜单上设置章节的地方。但是，指令控制器在Ajax调用返回响应之前正在运行。因此，当我尝试访问该属性时，它是未定义的。

Answer 1

根据您更新的问题，我认为您可以在成功返回ajax后使用ng-if作为自定义指令，您可以将其显示出来。虽然我不知道您的页面控制器是否使用下面的ajax服务/工厂是相似的。

<强>模板

 <menu-section ng-if="" sections="menu.sections" addons="addons"
    options="options" menu="menu.id"></menu-section>

控制器

app.controller('pageController',['$scope','ajaxService',function($scope,ajaxService){

        $scope.sections = [];
        $scope.showMenuDirective = false; // initially directive is not shown


 //get data or $http here itself , i thought u have use some service to do this

    ajaxService.getData.then(function(data){
           $scope.sections.push(data);
           $scope.showMenuDirective = true; // directive shown here on success
        });

  }]);

Answer 2

我采用的解决方案是重新评估我是否对单个指令投入太多。我删除了这个指令并制作了几个较小的指令。在父作用域中，我可以使用async.series（）并以更加可控的方式收集远程数据的位。

感谢您的评论和有用的建议。

指令中的角度范围奇怪

2 个答案: