尝试将div内容从模板div(o_time_templ)复制到另一个并替换其中的两个单词。 在更改选择时,应复制内容,将其放入' o_time_mss'并替换更改1和2.
我的代码如下。第一次克隆后,克隆内容为空。
$('select[id=o_time]').on('change', function() {
var template = $("#o_time_templ p").clone().html();
var delTimeVars = $('#o_time').val();
delTimeVars = delTimeVars.split('-');
var delTime = delTimeVars[0];
var delTime_price = delTimeVars[1];
if (delTime_price != undefined) {
$("#o_time_mss").replaceWith(template);
$("#o_time_mss p").text($("#o_time_mss p").text().replace("o_time_zone_screen", delTime).replace("o_time_price_screen", delTime_price));
$("#o_time_mss").show();
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="o_time" id="o_time" required>
<option value="">Delivery time</option>
<option value="Normal lunch">Normal lunch</option>
<option value="Breakfast-20">Breakfast</option>
<option value="After 5pm-40">After 5pm)</option>
<option value="Saturday-120">Saturday</option>
<option value="Sunday-120">Sunday</option>
</select>
<div class="hidden" id="o_time_mss">
<p>change 1: o_time_zone_screen AND change 2: o_time_price_screen</p>
</div>
<div class="hidden" id="o_time_templ">
<p>change 1: o_time_zone_screen AND change 2: o_time_price_screen</p>
</div>
&#13;
答案 0 :(得分:1)
不要用模板替换o_time_mss,因为它会用文本替换所有html内容。使用html()
// Angular App Code
var app = angular.module('myApp', ['offClick']);
app.controller('myAppController', ['$scope', '$timeout', function($scope,$timeout) {
$scope.showContainer = false;
$scope.toggleContainer = function() {
$timeout(function() {
$scope.showContainer = !$scope.showContainer;
}, 300);
};
$scope.hideContainer = function(scope, event, p) {
$scope.showContainer = false;
console.log('event: ', event);
console.log('scope: ', scope);
console.log(p);
};
}]);
// Off Click Directive Code
angular.module('offClick', [])
.directive('offClick', ['$rootScope', '$parse', function ($rootScope, $parse) {
var id = 0;
var listeners = {};
// add variable to detect touch users moving..
var touchMove = false;
// Add event listeners to handle various events. Destop will ignore touch events
document.addEventListener("touchmove", offClickEventHandler, true);
document.addEventListener("touchend", offClickEventHandler, true);
document.addEventListener('click', offClickEventHandler, true);
function targetInFilter(target, elms) {
if (!target || !elms) return false;
var elmsLen = elms.length;
for (var i = 0; i < elmsLen; ++i) {
var currentElem = elms[i];
var containsTarget = false;
try {
containsTarget = currentElem.contains(target);
} catch (e) {
// If the node is not an Element (e.g., an SVGElement) node.contains() throws Exception in IE,
// see https://connect.microsoft.com/IE/feedback/details/780874/node-contains-is-incorrect
// In this case we use compareDocumentPosition() instead.
if (typeof currentElem.compareDocumentPosition !== 'undefined') {
containsTarget = currentElem === target || Boolean(currentElem.compareDocumentPosition(target) & 16);
}
}
if (containsTarget) {
return true;
}
}
return false;
}
function offClickEventHandler(event) {
// If event is a touchmove adjust touchMove state
if( event.type === 'touchmove' ){
touchMove = true;
// And end function
return false;
}
// This will always fire on the touchend after the touchmove runs...
if( touchMove ){
// Reset touchmove to false
touchMove = false;
// And end function
return false;
}
var target = event.target || event.srcElement;
angular.forEach(listeners, function (listener, i) {
if (!(listener.elm.contains(target) || targetInFilter(target, listener.offClickFilter))) {
$rootScope.$evalAsync(function () {
listener.cb(listener.scope, {
$event: event
});
});
}
});
}
return {
restrict: 'A',
compile: function ($element, attr) {
var fn = $parse(attr.offClick);
return function (scope, element) {
var elmId = id++;
var offClickFilter;
var removeWatcher;
offClickFilter = document.querySelectorAll(scope.$eval(attr.offClickFilter));
if (attr.offClickIf) {
removeWatcher = $rootScope.$watch(function () {
return $parse(attr.offClickIf)(scope);
}, function (newVal) {
if (newVal) {
on();
} else if (!newVal) {
off();
}
});
} else {
on();
}
attr.$observe('offClickFilter', function (value) {
offClickFilter = document.querySelectorAll(scope.$eval(value));
});
scope.$on('$destroy', function () {
off();
if (removeWatcher) {
removeWatcher();
}
element = null;
});
function on() {
listeners[elmId] = {
elm: element[0],
cb: fn,
scope: scope,
offClickFilter: offClickFilter
};
}
function off() {
listeners[elmId] = null;
delete listeners[elmId];
}
};
}
};
}]);