ng-click後沒有編譯Angular指令

單擊按鈕後，下面的代碼不起作用。看來該指令不會再次編譯。任何人都可以幫我解決這個問題！ng-click後沒有編譯Angular指令

HTML：

<button ng-click="run()">click</button> 
    <p>Hello {{name}}!</p> 
    <customdir filterby="name"></customdir>

類似的代碼可以在這裏找到http://plnkr.co/edit/OQqLeUIoFNhkqSoeIdyM?p=preview。

的Javascript：

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 

$scope.name = 'World'; 

$scope.run = function() { 
$scope.name = 'goal'; 
}; 

}); 
app.directive('customdir', function($compile) { 
var getTemplate = function(filterby) { 
switch (filterby) { 
    case 'World': 
    return '<div class="col-lg-1" id="ready">' + 
     '<img ng-src="http://plnkr.co/img/plunker.png" style="height: 35px; width: 35px; margin-left: 70px; margin-bottom: 3px" />' + 
     '</div>'; 
    case 'goal': 
    return '<b>tttttt !!</b>'; 
    default: 
    return '<b>Error !!</b>'; 
} 
} 
return { 
restrict: 'E', 
scope: { 
    filterby: '=' 
}, 
link: function(scope, element, attrs) { 
    var el = $compile(getTemplate(scope.filterby))(scope); 
    element.replaceWith(el); 
    } 
}; 
});

來源

2016-11-30 Prashanth

你必須使用scope.$watch('filterby', function(newValue, oldValue) { })來處理這個模型上的變化。

工作拷貝：

var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.name = 'World'; 
 

 
$scope.run = function() { 
 
$scope.name = 'goal'; 
 
}; 
 

 
}); 
 

 

 
app.directive('customdir', function($compile) { 
 
var getTemplate = function(filterby) { 
 
switch (filterby) { 
 
    case 'World': 
 
    return '<div class="col-lg-1" id="ready">' + 
 
     '<img ng-src="http://plnkr.co/img/plunker.png" style="height: 35px; width: 35px; margin-left: 70px; margin-bottom: 3px" />' + 
 
     '</div>'; 
 
    case 'goal': 
 
    return '<b>tttttt !!</b>'; 
 
    default: 
 
    return '<b>Error !!</b>'; 
 
} 
 
} 
 
return { 
 
restrict: 'E', 
 
scope: { 
 
    filterby: '=' 
 
}, 
 
link: function(scope, element, attrs) { 
 
     
 
    scope.$watch('filterby', function(newValue, oldValue) { 
 
    var el = $compile(getTemplate(scope.filterby))(scope); 
 
    element.replaceWith(el); 
 
    element = el; 
 
    }); 
 
    } 
 
}; 
 
});

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="http://code.angularjs.org/1.2.5/angular.js" data-semver="1.2.5"></script> 
 
    <script src="app.js"></script> 
 
    </head> 
 

 
    <body ng-controller="MainCtrl"> 
 
    <p>Hello {{name}}!</p> 
 
    <customdir filterby="name"></customdir> 
 
    <button ng-click="run()">click</button> 
 
    </body> 
 

 
</html>

來源

2016-11-30 06:44:20 Aruna

變化，當你在DOM編譯VS的地方它的序列，閱讀更多關於它here

var el =angular.element('your html'); 
element.replaceWith(el); 
$compile(el)(scope);

來源

2016-11-30 06:20:12 harishr

ng-click後沒有編譯Angular指令

回答

相關問題