我想将我的指令的另一个实例附加到父指令中,但我不能使用 $apply 重新编译我的指令。
我想我想念这里的某个地方:)
我的 HTML 代码
<div ng-app="TestApp">
<div ng-controller="TestCtrl">
<input ng-model="NewData" />
<button ng-click="AddNewData($event)">Add New</button>
<br /><br />
<div test-collector="testColScope" id="testCol">
<div test-data="" xx-value="Mouse" xx-href="https://fb.com"></div>
<div test-data="" xx-value="Keyboard" xx-href="https://goo.gl"></div>
</div>
</div>
</div>
我的 JavaScript 代码
var app = angular.module('TestApp', []);
app.controller('TestCtrl', ['$scope', function($scope){
$scope.AddNewData = function($event){
// i also want to access this but it shows undefined
console.log("test-collector", $scope.testColScope);
var div = $('<div></div>')
.attr(
{
"test-data":"",
"xx-value":$scope.NewData,
"xx-href":"http://p.com"
});
//$scope.$apply(function(){
$('#testCol').append(div);
//});
};
}]);
app.directive("testCollector", function () {
return {
restrict: "A",
scope: {
},
transclude: true,
replace: true,
controller: function($scope) {
console.log($scope);
},
link: function(scope, element, attrs) {
console.log(attrs);
scope[attrs.testCollector] = {
Enteng : 'Dagpin'
};
},
template: '<div>' +
'<ul><div ng-transclude></div></ul>' +
'</div>'
}
});
app.directive("testData", function(){
return {
restrict: "A",
require: '^testCollector',
transclude: true,
replace: true,
scope: {
xxValue: '@',
xxHref: "@"
},
template: '<li><a href="{{xxHref}}">{{xxValue}}</a></li>'
}
});
这是摆弄问题