从指令

时间:2016-01-19 08:48:46

标签: angularjs angularjs-directive angularjs-scope

我有一个指令,如下所示,

app.directive('metadataSelectPicker', ['ManagementService', '$timeout', '$location', function (ManagementService, $timeout, $location) {
return {
    restrict: 'E',
    replace: true,
    templateUrl: 'Views/NgTemplates/DirectiveTemplates/MetaDataSelectPicker.html',
    link: function (scope, elem, attr) {
        var promise = ManagementService.getMetaDataList();
        promise.then(function (response) {
            if (response.data.length > 0) {
                scope.metaDataList = response.data;
                $timeout(function () {
                  $('.selectpicker').on('change', function () {
                        $('.selectpicker').selectpicker('refresh');
                        $timeout(function () {
                            if (scope.selectedMetaData == 'Class') {
                                $location.path('/class');
                            } else {
                                $location.path('/metadata');
                            }
                        });
                    });
                });
            }
        }, function () {
            alert('Data fetching failed.');
        });
    }
}
}]);

MetaDataSelectPicker.html如下:

<div id="metaDataSelectPicker">
<div class="sel_allcustom_name">
    <select class="selectpicker show-tick form-control" ng-model="selectedMetaData">
        <option ng-repeat="metaData in metaDataList" value="{{metaData.ValueText}}">{{metaData.DisplayText}}</option>
    </select>
</div>
<div class="clearfix"></div>

我正在使用此指令位于一个名为homeController的控制器的页面中。在这个页面中,我使用ng-view标签来加载不同的内容。以下代码用于将各个页面重定向到ng-view标记。

if (scope.selectedMetaData == 'Class') {
                                $location.path('/class');
                            } else {
                                $location.path('/metadata');
                            }

在routeProvider配置中,我为每个ng-view路径指定了不同的控制器。最初,我没有加载任何视图到ng-view。但我在更改选择控件中的选项时重定向ng-view页面。在/ metadata页面的控制器中,我有一个函数并分配给一个范围变量。我需要在更改select选项时调用该函数,如果scope.selectedMetaData!='Class'。我需要按照以下方式进行,

if (scope.selectedMetaData == 'Class') {
                                $location.path('/class');
                            } else {
                                $location.path('/metadata');
                                scope.doSomething();
                            }

但是在更改选项时,可能无法加载相应的控制器。所以scope.doSomething();不管用。我不喜欢使用广播事件。我需要处理ng-view页面加载并在此之后执行该功能。我怎样才能做到这一点?或者建议我任何其他更好的方法。请帮帮我。

1 个答案:

答案 0 :(得分:0)

您可以使用https://github.com/angular-ui/ui-router进行路由,然后您可以使用状态更改事件参考之一。 https://github.com/angular-ui/ui-router/wiki