Angular：將表達式傳遞給具有隔離范圍的自定義指令時出現令牌錯誤

Question

（對消息，代碼等進行了一些修改以解釋問題）

錯誤：

Syntax Error: Token 'promiseObject' is unexpected, expecting [:] at column 3 of the expression [{{promiseObject?promiseObject.activeDEM:0}}] starting at [promiseObject?promiseObject.activeDEM:0}}].

以下代碼解釋了該問題：

使用的HTML：

<count-up id="feafdcds" duration="1" end-val='{{promiseObject?promiseObject.value:0}}' class="number" ></count-up>

使用的指令具有隔離范圍。 如果刪除了孤立的作用域，那么錯誤就會消失，但是，我不知道如何觀察屬性的變化。

angular.module('core-metronic').directive('countUp', ['$filter',
    function ($filter) {

        return {
            restrict: 'E',
            scope: {
                endVal: '='
            },
            link: function ($scope, $el, $attrs) {
                $scope.$watch('endVal',function(newValue,oldValue)
                {
                    if(newValue)
                        alert(newValue); 
                },true);

                //...more code...

            }

        }
    }
]);

Answer 1

您不能使用角度雙向綁定

endVal: '='

帶有角度表達

{{promiseObject?promiseObject.value:0}}

當您使用雙向綁定角度嘗試時，如果更改值，則將該新值設置為綁定變量。 在您的情況下，您想要綁定到endVal的不是變量，而是表達式。 所以角度不知道該怎么辦。

您有兩種選擇：

1. 如果您不需要指令之外的endVal值，則可以使用

   endVal: '@'

而是像這樣刪除模板中的評估括號

<count-up id="feafdcds" duration="1" end-val='promiseObject?promiseObject.value:0' class="number" ></count-up>

這將起作用，並將endVal的值設置為promiseObject.value或0。因此，您必須注意，它將值綁定為字符串，因此實際值將為'0'或包含promiseObject值的字符串。 您可能必須將其轉換為其他地方的編號。 但這不會在指令外更新promiseObject的值。

2. 如果您確實需要在promiseObject中的指令之外將更新后的值作為promiseObject.value，則必須將endVal綁定到變量。 這樣你就可以保持

   endVal: '='

但您必須將模板更改為

<count-up id="feafdcds" duration="1" end-val='promiseObject.value' class="number" ></count-up>

這樣，當endVal更改時，Angular將始終更新promiseObject.value的值。 但這也意味着您必須注意promiseObject始終存在於外部控制器中的某個位置（並且是一個對象）。 此外，您將必須將默認值0嘗試通過其他地方的表達式授予。 您也可以在外部控制器中執行此操作，例如，通過初始化promiseObject

promiseObject = {
    value: 0
}