AngualrJS directive use isolated scope binding issue in Firefox only

使用 angularJS 開心的寫一個 directive 使用獨立 scope (isolated scope) 的時候踩到一個filefox only的坑，因為只有 filefox 有，在 Chrome, Safari, ie 都沒發生過實在太特別了..所以紀錄一下..OTZ..感謝: raphahsu。

直接看範例檔:

sample Code 功能是 input ＋ remove button, 點擊 button 將會把 input 內容清空
相當於 <input type='search'/> 的功能。

firefoxissue.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>firefox directive issue</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script>
    var app = angular.module('myapp', []);
    app.controller('myCtrl',  function($scope) {
        $scope.hello = "firefox";
    });
    app.directive('firefoxissue', function() {
        return {
            restrict: 'E',
            replace: true, // key Point !!
            scope: {
                listen: '='
            },
            template: '<input type="text" ng-model="listen" placeholder="bowers?"/>'+
                        '<button ng-show="listen" ng-click="remove()">X</button>',
            link: function( scope ) {
                scope.remove = function(){
                    scope.listen = '';
                }
            }
        };
    });
    </script>
</head>
<body>
    <div ng-controller="myCtrl">
        <h1>firefox driective issue Test</h1>
    	<firefoxissue listen="hello"></firefoxissue>
    </div>
</body>
</html>

主要是16行： replace: true 這部分不要用或者設定為 false 既可。
因此範例檔直接執行會是錯誤的狀態。

Reference: