子状态应该在父 ui-view 中加载一个指令

Question

我有这个配置：

$stateProvider
        .state('ShowTabForm', {
            url: '/ShowTabForm/:id/:title',
            templateUrl: '/app/templates/pages/ShowTabForm.html',
            controller: 'tabFormController'
        })
        .state('ShowTabForm.LoadTabForm', {
            url: '/LoadTabForm/:tabId',
            template: '<dynamic-form></dynamic-form>'
        });

ShowTabForm.html 如下所示：

<div ng-controller="tabFormController">
    <ui-view></ui-view>
</div>

并在我的 tabFormController 中更改状态：

$state.go('ShowTabForm.LoadTabForm', { tabId: 727 });

问题是，它不会在父 ui-view 中加载指令。当我跟踪代码动态形式控制器运行两次时。非常感谢帮助我解决此问题:)

更新：我发现了问题，但我无法解决。 [dynamicForm] 指令正确加载，但 dynamicform.html(view) 在从 dynamicFormController 内的 $http 服务获取数据之前呈现。有什么想法...？

Answer 1

使用 ui-router 时，您不需要将 ng-controller="tabFormController" 属性添加到您的模板。此外，ShowTabForm.LoadTabForm 似乎是 ShowTabForm 的子状态，因此您必须将 parent: 'ShowTabForm' 添加到您的子状态。像这样：

    $stateProvider
        .state('ShowTabForm', {
            url: '/ShowTabForm/:id/:title',
            templateUrl: '/app/templates/pages/ShowTabForm.html',
            controller: 'tabFormController'
        })
        .state('ShowTabForm.LoadTabForm', {
            parent: 'ShowTabForm',
            url: '/LoadTabForm/:tabId',
            template: '<dynamic-form></dynamic-form>'
        });

Answer 2

扩展，基于评论 - 有 is working example

让我们对 data1.json、data2.json 进行两次 $http 调用。这就是服务：

  .factory('dynamicformService', ["$http", function ($http) {
    var getForm = function (objectId) {

      return $http({ method: "GET", url: "data" + objectId + ".json" })
        .then(function (result) {
          return result.data;
        });
    }; 

    return {
        getForm: getForm
    };
}])

这些是 UI-路由器状态控制器

  .controller('dynamicformController', ['$scope','$stateParams', 'dynamicformService', 
  function dynamicformController($scope, $stateParams, dynamicformService){
    dynamicformService
        .getForm($stateParams.tabId)
        .then(function (forms) {
          $scope.forms = forms; 
        });
  }])

最后是动态表单模板

<div ng-repeat="form in forms" >

<label for="{{form.Name}}">{{form.Name}}</label>
<input 
  type="{{form.type}}" 
  name="{{form.Name}}" ng-model="form.Name" />

</div>

这些链接使其正常工作

<a href="#/ShowTabForm/2/title1/LoadTabForm/1">
<a href="#/ShowTabForm/2/title2/LoadTabForm/2">

检查一下here 原创部分

您的解决方案应该有效。为了支持它，我创建了 a working plunker here.

这是我使用的指令动态形式：

 .directive('dynamicForm', function(){
    return {
      template: "This is the dynamic Form",
      controller: function(){console.log("inside of a form")},
    };
  })

这些链接正在工作并呈现它：

<a href="#/ShowTabForm/1/title1">
<a href="#/ShowTabForm/2/title2">
<a href="#/ShowTabForm/2/title1/LoadTabForm/1">
<a href="#/ShowTabForm/2/title2/LoadTabForm/2">

状态定义的片段（如问题中）未更改：

.state('ShowTabForm', {
    url: '/ShowTabForm/:id/:title',
    templateUrl: 'app/templates/pages/ShowTabForm.html',
    controller: 'tabFormController'
})
.state('ShowTabForm.LoadTabForm', {
    url: '/LoadTabForm/:tabId',
    template: '<dynamic-form></dynamic-form>'
});

检查一下here

子状态应该在父 ui-view 中加载一个指令

child state should load a directive inside parent ui-view

state

nested

angularjs

angular-ui

angular-ui-router