ng-click後に角ディレクティブがコンパイルされない

ボタンをクリックした後、以下のコードが機能しません。それは指示が再びコンパイルされていないようです。誰もがこれで私を助けることができます！ng-click後に角ディレクティブがコンパイルされない

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

それについての詳細を読みます。

作業コピー：

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内の場所対それをコンパイルするときのシーケンスを、あなたがモデルチェンジでこれを処理するためにscope.$watch('filterby', function(newValue, oldValue) { })を使用する必要がhere

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

出典

2016-11-30 06:20:12 harishr

ng-click後に角ディレクティブがコンパイルされない

答えて

関連する問題