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 찾을 수 있습니다.

자바 스크립트 :

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 후 각도 지시문이 컴파일되지 않음

답변

관련 문제