AngularJS – 范围未更新

出于某种原因,即使删除了各自的代码并重新启动应用程序,我也无法从范围变量中删除描述和打包元素/字段(参见图片).任何帮助深表感谢.

我的指示：

app.directive('formElement',function() {
  return {
    restrict: 'E',transclude: true,scope: {
        label : "@",model : "="
    },link: function(scope,element,attrs) {
        scope.disabled = attrs.hasOwnProperty('disabled');
        scope.required = attrs.hasOwnProperty('required');
        scope.pattern = attrs.pattern || '.*';
        console.log(element);
    },template:
    '<div class="form-group">' +
    '<label class="col-sm-3 control-label no-padding-right"> {{label}}</label>' +
    '<div class="col-sm-7">' +
    '<span class="block input-icon input-icon-right" ng-transclude></span>' +
    '</div></div>'
  };     
});

我的控制器：

app.controller('ProductsCtrl',function ($scope,$modal,$filter,Data) {
        $scope.product = {};
        Data.get('products').then(function(data){
            $scope.products = data.data;
        });
        $scope.changeProductStatus = function(product){
            product.status = (product.status=="Active" ? "Inactive" : "Active");
            Data.put("products/"+product.id,{status:product.status});
        };
        $scope.deleteProduct = function(product){
            if(confirm("Are you sure to remove the product?")){
                Data.delete("products/"+product.id).then(function(result){
                    $scope.products = _.without($scope.products,_.findWhere($scope.products,{id:product.id}));
                });
            }
        };
        $scope.open = function (p,size) {
            var modalInstance = $modal.open({
                templateUrl: 'partials/product-edit.html',controller: 'ProductEditCtrl',size: size,resolve: {
                    item: function () {
                        return p;
                    }
                }
            });
            modalInstance.result.then(function(selectedObject) {
                if(selectedObject.save == "insert"){
                    $scope.products.push(selectedObject);
                    $scope.products = $filter('orderBy')($scope.products,'id','reverse');
                }else if(selectedObject.save == "update"){
                    p.price = selectedObject.price;
                    p.stock = selectedObject.stock;
                }
            });
        };

        $scope.columns = [
            {text:"ID",predicate:"id",sortable:true,dataType:"number"},{text:"Name",predicate:"name",sortable:true},{text:"Price",predicate:"price",{text:"Stock",predicate:"stock",{text:"Status",predicate:"status",{text:"Action",predicate:"",sortable:false}
        ];
    });

    app.controller('ProductEditCtrl',$modalInstance,item,Data) {

        $scope.product = angular.copy(item);

        $scope.cancel = function () {
            $modalInstance.dismiss('Close');
        };
        $scope.title = (item.id > 0) ? 'Edit Product' : 'Add Product';
        $scope.buttonText = (item.id > 0) ? 'Update Product' : 'Add New Product';

        var original = item;
        $scope.isClean = function() {
            return angular.equals(original,$scope.product);
        };

        $scope.saveProduct = function (product) {
            product.uid = $scope.uid;
            if(product.id > 0){
                Data.put('products/'+product.id,product).then(function (result) {
                    if(result.status != 'error'){
                        var x = angular.copy(product);
                        x.save = 'update';
                        $modalInstance.close(x);
                    }else{
                        console.log(result);
                    }
                });
            }else{
                product.status = 'Active';
                Data.post('products',product).then(function (result) {
                    if(result.status != 'error'){
                        var x = angular.copy(product);
                        x.save = 'insert';
                        x.id = result.data;
                        $modalInstance.close(x);
                    }else{
                        console.log(result);
                    }
                });
            }
        };
    });

HTML：

product-edit.html(部分)：

<div class="modal-header">
      <h3 class="modal-title">Edit product [ID: {{product.id}}]</h3>
</div>
<div class="modal-body">
    <form name="product_form" class="form-horizontal" role="form" novalidate>

        <form-element label="NAME" mod="product">
            <input type="text" class="form-control" name="name" placeholder="Name" ng-model="product.name" ng-disabled="product.id" focus/>
        </form-element>

        <form-element label="PRICE" mod="product">
            <input type="text" name="price" class="form-control" placeholder="PRICE" ng-model="product.price"  only-numbers/>
            <small class="errorMessage" ng-show="product_form.price.$dirty && product_form.price.$invalid"> Enter the price.</small>
        </form-element>

       <form-element label="STOCK" mod="product">
            <input type="text" name="stock" class="form-control" placeholder="STOCK" ng-model="product.stock" only-numbers/>
            <small class="errorMessage" ng-show="product_form.stock.$dirty && product_form.stock.$invalid"> Enter the available stock.</small>
        </form-element>


        <div class="modal-footer">
            <form-element label="">
                <div class="text-right">
                    <a class="btn btn-sm" ng-click="cancel()">Cancel</a>
                    <button ng-click="saveProduct(product);"
                            ng-disabled="product_form.$invalid || enableUpdate"
                            class="btn btn-sm btn-primary"
                            type="submit">
                        <i class="ace-icon fa fa-check"></i>{{buttonText}}
                    </button>
                </div>
            </form-element>
        </div>
    </form>
</div>

products.html(部分)：

<div class="panel panel-default">

    <div class="panel-heading" style="height: 60px;">


        <div class="pull-left">
            <input placeholder="Filter inventory list ..." class="form-control" aria-describedby="basei" ng-model="filterProduct" ng-change="resetLimit();"  autocomplete="off" type="text" focus>
        </div>

        <div class="pull-right">
            <button type="button" class="btn btn-default fa fa-plus" ng-click="open(product);">Add New Product</button>
        </div>


    </div>

    <div class="panel-body">

        <div class="input-group pull-right">
        </div>

        <table class="table table-striped">

            <tr ng-show="products.length==0"><td style="vertical-align:middle;"><i class="fa fa-ban fa-3x"></i>&nbsp;No data found</td></tr>

            <tr ng-hide="products.length>-1"><td style="vertical-align:middle;"><i class="fa fa-spinner fa-spin"></i>&nbsp;Loading</td></tr>

            <tr><th ng-repeat="c in columns">{{c.text}}</th></tr>

            <tr ng-repeat="c in products | filter:filterProduct | orderBy:'-id'" id="{{c.id}}" animate-on-change='c.stock + c.price' ng-animate=" 'animate'">

                <td>{{c.id}}</td><td>{{c.name}}</td><td>{{c.price}}</td><td>{{c.stock}}</td>

                <td>

                    <button class="btn" ng-class="{Active:'btn-success',Inactive:''}[c.status]" ng-click="changeProductStatus(c);">{{c.status}}</button>

                </td>

                <td>

                    <div class="btn-group">

                      <button type="button" class="btn btn-default fa fa-edit" ng-click="open(c);"></button>

                      <button type="button" class="btn btn-danger fa fa-trash-o" ng-click="deleteProduct(c);"></button>

                    </div>

                </td>
            </tr>

        </table>

    </div>

</div>

解决方法

我经常在使用Angular时缓存模板时出现问题.在chrome中,如果您打开了开发人员控制台,则可以进入设置并防止它在控制台打开时使用缓存结果.或手动清除浏览器缓存