AngularJS-为什么DOM没有更新

stackCtrl函数声明，我要做的是将一个堆栈（一个基本的JS对象）添加到一个名为cardStacks的数组中。我已经读到AngularJS中的控制器不应该做很多事情，您也不希望控制器完成DOM元素的操作。因此，我所做的是创建一个save指令，您可能会猜到，如果对象未被编辑，它会在$scope.cardStacks中添加一个新堆栈

在模板应该更新之前，一切似乎都正常。console.log显示对象将进入一个数组，但由于模板没有更新，我只能猜测它不是$scope.cardStacks

有人能看一下下面的内容并告诉我为什么模板没有列出模板中的堆栈吗

考虑以下几点：

模板：

<div ng-controller="stackCtrl">
    <stackeditor></stackeditor>
    <p>Stacks:</p>
    <ul class="stack-list" ng-repeat="stack in cardStacks">
        <li><a href="#">{{stack.title}}</a>
            <span class="stack-opts"> (<a href="#" ng-click="edit=true">Edit</a> | <a href="#">Delete</a>)</span>
        </li>
    </ul>
</div>

指令：

fcApp.directive('save', function() {
    var linkFn = function($scope, element, attrs) {
        element.bind("click", function() {
            if (typeof $scope.stackTitle !== 'undefined' && $scope.stackTitle.length > 0) {
                if ($scope.edit) {
                    $scope.editStack(element);
                } else {
                    $scope.addStack($scope.stackTitle);
                }
            } else {
                $scope.error = "Your card stack needs a title!";
            }
        });
    });

    return {
        restrict: "A",
        link: linkFn
        }
    }
});

---

保存函数最好在stackCtrl中使用，然后在模板中使用ng click来调用它

您是对的，在控制器中操作DOM是不好的做法，但您只是在更新控制器中的对象-angular正在整理DOM，这很好。

尝试使用$apply:

 $scope.cardStacks.push(newStack);
 $scope.$apply(function(){
   $scope.cardStacks;
 }

渲染可能是问题所在。。。。。希望能有帮助

fcApp.directive('save', function() {
    var linkFn = function($scope, element, attrs) {
        element.bind("click", function() {
            if (typeof $scope.stackTitle !== 'undefined' && $scope.stackTitle.length > 0) {
                if ($scope.edit) {
                    $scope.editStack(element);
                } else {
                    $scope.addStack($scope.stackTitle);
                }
            } else {
                $scope.error = "Your card stack needs a title!";
            }
        });
    });

    return {
        restrict: "A",
        link: linkFn
        }
    }
});

 $scope.cardStacks.push(newStack);
 $scope.$apply(function(){
   $scope.cardStacks;
 }