Question

我有一个编译模板的指令，并使用范围上的变量来增加模板中的索引值。

这是我的指示：

angular.module('app').directive( 'ingredient', function ( $compile, persistedCount, $templateRequest) {


return {
    restrict: 'E',
    template: '<div sticky-nav><button type="button" class="btn btn-success" ng-click="add()">add ingredient  <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button></div>',
    controller: function ( $scope, $element ) {
      $scope.ingredientNumber = persistedCount.ingredients = persistedCount.ingredients || 0;


  $scope.add = function () {

    $templateRequest("templates/ingredients-template.html").then(function(html){
        compileIngredients(html);   
    });

    function compileIngredients(html){
          $element.parent().append($compile(html)($scope));
          console.log($scope.ingredientNumber);
    }

    persistedCount.ingredients++;
    console.log(persistedCount.ingredients);


};

persistedCount服务：

angular.module('app').service('persistedCount',function(){
return{
    persistedCount:{
        ingredients: 0,
        directions:0,
        notes:0
      }
    }
});

我在模板$scope.ingredientNumber中使用了一个变量，实际上只是为了增加索引值。

<formly-form model="vm.model.data.ingredients[ingredientNumber].quantity" fields="vm.fields.data.ingredients[ingredientNumber].quantity"> </formly-form>

问题是$ scope.ingredientNumber永远不会增加，但persistedCount会增加。我认为这是一个封闭问题？似乎$ scope.incrementNumber在最初设置后从未获取新值？

当我在$ scope.add函数中设置$scope.ingredientNumber = persistedCount.ingredients = persistedCount.ingredients || 0;时，它会正确显示，但DOM上的所有内容也会获取该值。所以没有0,1,2,3我有3,3,3,3

Answer 1

第一次加载控制器时，此行仅根据您的代码运行一次：

$scope.ingredientNumber = persistedCount.ingredients = persistedCount.ingredients || 0;

因此，您的逻辑似乎存在问题。

旁注：通过控制器操作DOM被认为是不好的做法。您是否确定无法通过为正在加载的模板创建成分指令来简化解决方案，只需使用ng-repeat来显示成分列表？

Angular指令闭包问题从范围变量编译

1 个答案: