在自定義angularjs指令中使用布爾值

Question

我正在嘗試使用指令，但是我面臨傳遞布爾值的問題。 當我評估頁面時，這就是我得到的錯誤：

語法錯誤：表達式[{{app.isNew}}]第2列的標記'{'無效鍵，從[{app.isNew}}開始]。

我使用的代碼如下：

home.html

<featured-app app-title="{{app.title}}" app-is-new={{app.isNew}}></featured-app>

home.js

app.controller('HomeCtrl', [ '$scope', function($scope) {
    $scope.app.title = "App name";
    $scope.app.isNew = true;
}]);

FeaturedApp.js

app.directive('featuredApp', function() {
   return {
       templateUrl: 'directives/templates/featuredApp.html',
       scope: {
           appTitle: '@',
           appIsNew: '='
        }
   };
});

FeaturedApp.html

<h2>{{appTitle}} <span class="label label-default" ng-show="{{appIsNew}}">New</span></h2>

有誰知道為什么我會收到上面的錯誤？ 我不確定哪里出了問題。

Answer 1

將您的html更改為：

home.html

<featured-app app-title="{{app.title}}" app-is-new="app.isNew"></featured-app>

或將FeaturedApp.js更改為：

app.directive('featuredApp', function() {
   return {
       templateUrl: 'directives/templates/featuredApp.html',
       scope: {
           appTitle: '@',
           appIsNew: '@'
        }
   };
});

以上取決於您的要求。 一種是單向綁定的，另一種是雙向的。 盡管您還必須進行以下更改：

FeaturedApp.html

<h2>{{appTitle}} <span class="label label-default" ng-show="appIsNew">New</span></h2>

Answer 2

更換：

<featured-app app-title="{{app.title}}" app-is-new={{app.isNew}}></featured-app>

帶有：

<featured-app app-title="app.title" app-is-new=app.isNew></featured-app>

和：

appTitle: '@',

帶有：

appTitle: '=',

問題是您在angular需要變量名的地方使用{{}} 。