我一直在尝试从指令的组合中获得动态行为。
这是我用于sampler.js和index.html的代码：
"use strict";
var app = angular.module("myApp", []);
var Sampler = (function () {
function Sampler(sampler) {
this.sampler = sampler;
this.name = null;
this.value = null;
if (sampler) {
this.name = sampler.name;
this.value = sampler.value;
}
}
Sampler.prototype.getTemplateFor = function (file) {
return 'templates/' + name + '/' + file + '.html';
};
Sampler.prototype.addA = function () {
this.value = 'A';
};
Sampler.prototype.addB = function () {
this.value = 'B';
};
Sampler.create = function (name) {
var samplerClass = name + 'Sampler';
var items = samplerClass.split('.');
var creator = (window || this);
for (var i = 0; i < items.length; i++) {
creator = creator[items[i]];
}
if (typeof creator !== 'function') {
throw new Error('Class named ' + samplerClass + ' not found.');
}
var sampler = new creator({
name: name
});
if (!(sampler instanceof Sampler)) {
throw new Error(name + ' is not instance of Sampler.');
}
return sampler;
};
return Sampler;
}());
app.directive("sampler", function ($compile) {
return {
restrict: "E",
scope: { result: '=' },
link: function (scope, element, attributes) {
var name = !attributes.name ? '' : attributes.name;
var sampler = Sampler.create(name);
scope.sampler = sampler;
var template = '<div class="sampler form-horizontal">' +
' <sampler-item ng-if="!!sampler.value" sampler="sampler" />' +
' <sampler-new ng-if="!sampler.value" sampler="sampler" />' +
'</div>';
if (name) {
$.ajax({
async: false,
url: sampler.getTemplateFor('sampler'),
success: function (response) { template = response; },
});
}
var content = $compile(template)(scope);
element.replaceWith(content);
scope.$watch('sampler.value', function () {
scope.result = scope.sampler.value;
});
}
};
});
app.directive("samplerNew", function ($compile) {
return {
restrict: "E",
scope: { sampler: '=' },
link: function (scope, element) {
var sampler = scope.sampler;
var template = '\
<div class="new">\
<button type="button" class="btn btn-default" ng-click="sampler.addA()">Add A</button>\
<button type="button" class="btn btn-default" ng-click="sampler.addB()">Add B</button>\
</div>';
if (sampler.name) {
$.ajax({
async: false,
url: sampler.getTemplateFor('new'),
success: function (response) { template = response; },
});
}
var content = $compile(template)(scope);
element.replaceWith(content);
}
};
});
app.directive("samplerItem", function ($compile) {
return {
restrict: "E",
scope: { sampler: '=' },
link: function (scope, element) {
var sampler = scope.sampler;
var template = '\
<div class="item">\
Item: {{sampler.value}}\
</div>';
if (sampler.name) {
$.ajax({
async: false,
url: sampler.getTemplateFor('sampler'),
success: function (response) { template = response; },
});
}
var content = $compile(template)(scope);
element.replaceWith(content);
}
};
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TypeScript HTML App</title>
</head>
<body ng-app="myApp">
<sampler result="result"></sampler>
Expression: {{result}}
<script src="lib/jquery/jquery-3.1.1.js"></script>
<script src="lib/angular/js/angular.js"></script>
<script src="js/directives/sampler.js"></script>
</body>
</html>页面加载时，输出为：
按下按钮后，预期结果应为：
但是结果是：
请注意，我正在使用链接来加载模板，因为我需要加载一个动态模板，其回退到默认模板。
如果我使用指令的template属性，则认为工作正常，但由于动态模板，这不适合我，因此请不要将此作为答案发送。
有人可以帮我吗？
谢谢
最佳答案
在$compile samplerNew指令的模板之后，您将使用已编译的content替换原始元素-具有ng-if属性的元素。因此，ng-if对<sampler-new>元素没有影响，因为每次渲染时都会被替换。
因此，尝试从ng-if元素中删除<sampler-new>属性，并将其放在编译<div class="new">指令的samplerNew元素上。
修复
转到您的sampler指令
在string函数中找到分配给template变量的link文字
从ng-if="!sampler.value"元素中剪切<sampler-new>
向下滚动到samplerNew指令
在string函数中找到分配给template变量的link文字
将ng-if="!sampler.value"粘贴到<div class="new">元素上
现在，当您单击Add A或Add B时，按钮将消失，并且将显示“项目”和“表达式”字段。