自定義角度指令屬性中的「錯誤：語法錯誤意外令牌」

我正在測試角度&試圖構建自定義角度指令，但我遇到了奇怪的控制檯錯誤。自定義角度指令屬性中的「錯誤：語法錯誤意外令牌」

我的指令被定義爲：

.directive('ipRecentActivityItem', function() { 
    return { 
    restrict: 'A', 
    replace: true, 
    transclude: true, 
    scope: { 
     'title': '@title', 
     'icon': '@icon', 
     'timeago': '@timeago', 
     'meta': '@meta', 
    }, 
    templateUrl: IP_PATH + '/app/components/recent-activity/recent-activity-item.tpl.html' 
    } 
});

我的模板是：

<div class="recent-activity-item"> 
    <div class="recent-activity-content"> 
    <div class="recent-activity-message"> 
     <a href="" class="recent-activity-title"> 
     {{title}} 
     </a> 
     <div class="recent-activity-meta"> 
     {{meta}} 
     </div> 
     <div data-ng-transclude></div> 
    </div> 
    </div> 
    <a href="" class="recent-activity-timeago">{{timeago}}</a> 
</div>

然後，在我看來，我試圖與調用它：

<div data-ip-recent-activity-item 
    title="My Item Title" 
    icon="My item icon" 
    timeago="4 hours ago" 
    meta="someone commented on an issue in garageband"> 
    My Item content 
</div>

在呈現的頁面中，所有內容都顯示爲應該顯示，但控制檯正在拋出以下類型的錯誤：Error: Syntax Error: Token 'Item' is an unexpected token at column 4 of the expression [My Item Title] starting at [Item Title].

如果我擺脫空間，錯誤消失，但我不明白這是爲什麼。任何人都可以啓發我嗎？謝謝！我還是新來的角鬥場，善良！ :)

編輯：忘了提我運行的角度1.1.5版

來源

2013-07-17 matthewsimo

好吧，所以我認爲這是與積極角度緩存模板有關。

我曾嘗試在元素上添加ng-show，方法是傳遞屬性（{{title}}等）。這個博克的東西，所以我刪除它。我認爲在查找拋出錯誤的模板時，角仍然使用緩存版本，但它仍然能夠正確渲染。上面的代碼工作得很好！ Trixy！

僅供參考，我使用下面的模板現在：

<div class="recent-activity-item"> 
    <div class="recent-activity-content"> 
    <div class="recent-activity-message"> 
     <a href="" class="recent-activity-title" data-ng-hide="title === ''"> 
     {{title}} 
     </a> 
     <div class="recent-activity-meta" data-ng-hide="meta === ''"> 
     {{meta}} 
     </div> 
     <div data-ng-transclude></div> 
    </div> 
    </div> 
    <a href="" class="recent-activity-timeago" data-ng-hide="timeago === ''">{{timeago}}</a> 
</div>

來源

2013-07-18 14:48:04 matthewsimo

編輯應該在這個答案中，而不是在原始文章中。 – Soviut

你應該接受解決問題的答案（Jason More's），而不是用回答編輯你的問題 – JPRO

我已將您發佈的問題的答案移到此問題上，並將其編輯到此處。請務必在將來以這種方式進行。 –

我敢肯定它的，因爲角度試圖在引號位評估。嘗試添加單引號，看看消息是否消失

<div data-ip-recent-activity-item 
    title="'My Item Title'" 
    icon="'My item icon'" 
    timeago="'4 hours ago'" 
    meta="'someone commented on an issue in garageband'"> 
    My Item content 
</div>

來源

2013-07-17 18:44:48

感謝您迴應，原來的角度積極緩存指令模板，不讓一個過時的版本拋出這些錯誤的走，不知道爲什麼它仍然可以在頁面上正確渲染..雖然..棘手的東西 --- 注意：我已經用我的解決方案更新了最初的問題，因爲我太複雜了，無法回答我自己的問題另外7個小時.... – matthewsimo

這是正確的答案，與緩存無關 – JPRO

當我想要在鏈接屬性的指令時，這幫助了我。謝謝！ –

自定義角度指令屬性中的「錯誤：語法錯誤意外令牌」

回答

相關問題