指令與模板泰德包含幾個引號iside對方

我有一個HTML組件：指令與模板泰德包含幾個引號iside對方

<div style="width:500px;"> 
     <div ng-repeat="day in week" ng-class="{true:'possibleDayStyle', false:'notPossibleDay'}[day.selected]" ng-click="AddOrRemoveDay(day)"> 
      {{day.name}}</div> 
     <button class="btnAddPossibleDays" ng-click="getAllSelectedDays()">Add</button> 
    </div>

我想這個代碼解壓縮到一個指令。

app.directive("weekDays", function(){ 
    return{ 
    restrict: "AEC", 
    replace: true, 
    template: '<div style="width:500px;">'+ 
       '<div ng-repeat="day in week" ng-class="{true:"possibleDayStyle", false:"notPossibleDay"}[day.selected]" ng-click="AddOrRemoveDay(day)">'+ 
        '{{day.name}}</div>'+ 
       '<button class="btnAddPossibleDays" ng-click="getAllSelectedDays()">Add</button>'+ 
       '</div>' 
    } 
});

但是我有NG-類，它包含引號

我不想用templateurl將其解壓縮到另一個HTML頁面內引號內引號的問題。我怎樣才能解決呢？

來源

2015-12-19 Ortal Blumenfeld Lagziel

嘗試\」裏面納克級逃避這些報價 – Pika

這是全樣本

angular.module("app", []); 
 
angular.module("app").controller("ctrl", function($scope) { 
 
    $scope.selectedDays = []; 
 

 
    $scope.week = [{ 
 
    name: 1, 
 
    selected: true 
 
    }, { 
 
    name: 2, 
 
    selected: false 
 
    }, { 
 
    name: 3, 
 
    selected: true 
 
    }, { 
 
    name: 4, 
 
    selected: false 
 
    }, { 
 
    name: 5, 
 
    selected: true 
 
    }, { 
 
    name: 6, 
 
    selected: false 
 
    }, { 
 
    name: 7, 
 
    selected: false 
 
    }]; 
 

 
    $scope.getAllSelectedDays = function() { 
 
    $scope.selectedDays = []; 
 
    angular.forEach($scope.week, function(day) { 
 
     if (day.selected) { 
 
     $scope.selectedDays.push(day); 
 
     } 
 
    }); 
 
    console.log($scope.selectedDays); 
 
    } 
 

 
}); 
 
angular.module("app").directive("weekDays", function() { 
 
    return { 
 
    restrict: "AEC", 
 
    replace: true, 
 
    scope: { 
 
     array: "=", 
 
     action: "&" 
 
    }, 
 
    template: "<div>" + 
 
     "<div ng-repeat=\"day in array\" ng-class=\"day.selected ? 'possibleDayStyle':'notPossibleDay'\">" + 
 
     "{{day.name}}" + 
 
     "<button ng-click=\"addOrRemoveDay(day)\">{{day.selected ? 'remove':'add'}}</button>" + 
 
     "</div> " + 
 
     "<button ng-click=\"getAllSelectedDays()\">get All selected days</button>" + 
 
     "</div>", 
 
    link: function(scope) { 
 
     scope.getAllSelectedDays = function() { 
 
     scope.action(); 
 
     } 
 

 
     scope.addOrRemoveDay = function(day) { 
 
     day.selected ? day.selected = false : day.selected = true; 
 
     } 
 
    } 
 
    } 
 
});

.possibleDayStyle { 
 
     background: blue; 
 
    } 
 
    .notPossibleDay { 
 
     background: red; 
 
    }

<!doctype html> 
 
<html ng-app="app" ng-controller="ctrl"> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <week-days array="week" action="getAllSelectedDays()"></week-days> 
 

 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script> 
 
</body> 
 

 
</html>

來源

2015-12-19 11:56:44 Maher

檢查您的瀏覽器控制檯，如果你點擊‘獲取所有選定的日子’。 – Maher

指令與模板泰德包含幾個引號iside對方

回答

相關問題