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]指令正确加载，但在dynamicFormController内从$ http服务获取数据之前，dynamicform.html（view）呈现。任何想法......？

Answer 1

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

parent: 'ShowTabForm'

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-Router状态控制器

  .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中加载一个指令

2 个答案: