Question

我试图使用指令，但是我遇到了传递布尔值的问题。当我评估我的页面时，这是我得到的错误：

语法错误：令牌＆＃39; {＆＃39;表达式第2列的无效键 [{{app.isNew}}]从[{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需要变量名的地方使用{{}}。

在自定义angularjs指令中使用布尔值

2 个答案: