Question

我有一个自定义角度指令，我用它来更改项目的价格显示。它存储为年度值，我需要在允许用户每年或每月查看/编辑之间切换。所以我的自定义指令正在我的输入框上工作（不能将它用于标签，div，span，但这是另一个问题）。

我能够看到当我切换属性时，它会选择更改，但输入中的值不会改变，我认为它是因为没有重新渲染元件。有什么方法可以强迫这种情况发生吗？

这是我的指示

angular.module('common.directive').directive('priceMonthly', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel) {
            var perMonth = false;

            attr.$observe('priceMonthly', function(isMonthly) {
                perMonth = (isMonthly.toLowerCase() === "true");
                console.log("per month is " + perMonth); //updating perMonth correctly at this point
                //guessing I need to do something here or in the function that changes the value of the attribute
            });

            function fromView(value){
                return perMonth ? value * 12 : value;
            }

            function toView(value){
                return perMonth ? value / 12 : value;
            }

            ngModel.$parsers.push(fromView);
            ngModel.$formatters.push(toView);
        }
    };
});

我在这里使用它。

<input type="text" price-monthly="{{monthlySqftView}}"
       class="form-control no-animate" name="item.priceLow"
       ng-model="item.priceLow" ui-money-mask="2"/>

这里是我目前所在的地方。因此，如果每月下拉，我输入12，价格正确144，这将是全年价格。现在，如果您将下拉列表更改为每年，我需要输入更新为144。 https://jsfiddle.net/6tnbonzy/

Answer 1

@rschlachter，我不确定这是否可以帮到你。 AngularJS使用scope.digest（）来清理脏数据。您可能需要将这行代码放入方法

        attr.$observe('priceMonthly', function(isMonthly) {
            perMonth = (isMonthly.toLowerCase() === "true");
            console.log("per month is " + perMonth); //updating perMonth correctly at this point
            //guessing I need to do something here or in the function that changes the value of the attribute
            //put it here, if you instantiated scope already. 
            scope.digest();
            //scope.apply();
        });

希望它有效

Answer 2

在进行必要的更改后尝试scope.$apply()

Answer 3

您似乎想要做这样的事情jsfiddle？

Table

和JS控制器

<form name="ExampleForm">
 <select ng-model="period">
  <option value="monthly">monthly</option>   
  <option value="yearly">yearly</option>     
 </select>
 <pre>
   period = {{period}}
 </pre>
 Edit as {{period}}: <input price-monthly="obj.price" period="period" ng-model="obj.price" >
 <pre>
   price = {{obj.price}}
 </pre>
</form>

和JS指令

.controller('ExampleController', function($scope) {
$scope.period = 'monthly';})

我希望这会对你有所帮助。

在Angular中刷新自定义属性指令的元素

3 个答案: