我已经使用自定义指令初始化了一个 jquery 插件。该插件按预期工作。然而，没有任何 AngularJS 特定代码在指令中不起作用
/*
Js steps
*/
app.directive('step', function () {
return {
link: function (scope, element, attrs) {
element.steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
stepsOrientation: "vertical"
});
}
}
});
//实现
<div step>
<h3>Services {{5+2}}</h3>
<section class="select_packages">
<div class="row">
<div class="col-md-12">
<h2 class="commonH2">1) Select Website Package</h2>
<p>What kind of website do you want?</p>
<hr/>
</div>
</div>
<div class="row">
<div class="col-md-4" ng-init="selectedClass =''" ng-class="{active_site: selectedClass === 'broucher'}" ng-click="selectedSite(1)">
<div class="quot_img">
<img src="img/man.jpg">
</div>
<div class="quot_details">
<h3 class="commonH3">Broucher Website</h3>
<p>
This package includes following items.
This package includes following itemsThis package includes following items.
This package includes following items This package includes following items.
This package includes following items
</p>
</div>
</div>
<div class="col-md-4" ng-class="{active_site: selectedClass === 'business_site'}" ng-click="selectedSite(2)" >
<div class="quot_img">
<img src="img/man.jpg">
</div>
<div class="quot_details">
<h3 class="commonH3">Business</h3>
<p>
This package includes following items.
This package includes following itemsThis package includes following items.
This package includes following items This package includes following items.
This package includes following items
</p>
</div>
</div>
<div class="col-md-4" ng-class="{active_site: selectedClass === 'ecommerce_site'}" ng-click="selectedSite(3)">
<div class="quot_img">
<img src="img/man.jpg">
</div>
<div class="quot_details">
<h3 class="commonH3">Ecommerce website</h3>
<p>
This package includes following items.
This package includes following itemsThis package includes following items.
This package includes following items This package includes following items.
This package includes following items
</p>
</div>
</div>
</div>
</section>
<h3>Additional Details</h3>
<section>
<p>Wonderful transition effects.</p>
</section>
<h3>Digital Marketing package</h3>
<section>
<p>The next and previous buttons help you to navigate through your content.</p>
</section>
</div>
</section>
例如:
Services {{5+2}}
假设在那里打印 Services 7，但它打印Services {{5+2}}
相反。ng-click 也不起作用。我是 angularjs 新手。
编辑:
//website quotation page
app.controller("webQuotationController",function($scope, $http, $location, $rootScope, $window, $routeParams){
$scope.selectedVar = false;
$scope.showStep2 = false;
$scope.seoShow = false;
$scope.fb_advertising_budget_show = false;
$scope.showMarketing = false;
$scope.content_price_updated = 0;
$scope.design_price_updated = 0;
$scope.fullprice = 0;
$scope.nopage =0;
$scope.showContact = false;
$scope.onsite_updated = 0;
$scope.offsite_updated = 0;
$scope.ppc_updated = 0;
$scope.marketing_strategy_updated= 0;
$scope.marketing_email_updated = 0;
$scope.marketing_event_updated = 0;
var errorMsg = "";
var broucher_site_price = 500;
var business_site_price = 3000;
var ecommerce_site_price = 10000;
var design_price = 80; //per psd
var content_price = 40; //per page
var sitePrice = 0;
var numpage = 0;
// onsite price
var onsite = 1;
//offsite price per month
var offsite = 1;
//ppc price
var ppc = 1;
//marketing strategy price
var marketing_strategy = 1;
//email marketing price
var marketing_email = 1;
//event management price
var marketing_event = 1;
$scope.$on('$viewContentLoaded',function(){
console.log("web quotation page has loaded");
});
//detect which page it is
$scope.selectedSite = function(x)
{
//console.log("btn clicked");
//first check if selected site has been clicked because this is required
switch(x)
{
case 1:
$scope.selectedClass = "broucher";
sitePrice = broucher_site_price;
//default design price
$scope.nopage = 8;
console.log("Broucher site selected");
$('.site_type').remove();
$('.price-ul').append("<li class='site_type list-group-item'>Site: Broucher.</li>");
break;
case 2:
$scope.selectedClass = "business_site";
sitePrice = business_site_price;
$('.site_type').remove();
$('.price-ul').append("<li class='site_type list-group-item'>Site: business.</li>");
$scope.nopage = 15;
break;
case 3:
$scope.selectedClass = "ecommerce_site";
sitePrice = ecommerce_site_price;
$('.site_type').remove();
$('.price-ul').append("<li class='site_type list-group-item'>Site: Ecommerce.</li>");
$scope.nopage = 20;
break;
default:
$('.site_type').remove();
console.log("Nothing selected");
break;
}
}
$scope.marketing_smm_advert_selected = function()
{
//if selected then show the budget box
//console.log("budget should display");
if($scope.marketing_smm_advert == true)
{
$scope.fb_advertising_budget_show = true;
//console.log("budget should display");
}
else
{
$scope.fb_advertising_budget_show = false;
}
}
$scope.price = function()
{
if($scope.content == true)
{
//find out how many pages
numpage = $scope.nopage;
$scope.content_price_updated = content_price * numpage;
}else
{
$scope.content_price_updated = 0;
}
if($scope.design == true)
{
//find out how many pages
numpage = $scope.nopage;
$scope.design_price_updated = design_price * numpage;
}else
{
$scope.design_price_updated = 0;
}
$scope.fullprice =
sitePrice
+ $scope.content_price_updated
+ $scope.design_price_updated
+ $scope.onsite_updated
+ $scope.ppc_updated
+ $scope.offsite_updated
+ $scope.marketing_strategy_updated
+ $scope.marketing_email_updated
+ $scope.marketing_event_updated ;
return $scope.fullprice;
}
$scope.contentPrice = function()
{
if($scope.content == true)
{
//find out how many pages
numpage = $scope.nopage;
$scope.content_price_updated = content_price * numpage;
}else
{
$scope.content_price_updated = 0;
}
return $scope.content_price_updated;
}
$scope.designPrice = function()
{
if($scope.design == true)
{
//find out how many pages
numpage = $scope.nopage;
$scope.design_price_updated = design_price * numpage;
}else
{
$scope.design_price_updated = 0;
}
return $scope.design_price_updated;
}
// onsite price
$scope.onsitePrice = function()
{
console.log("onsite function hit");
if($scope.onsite == true)
{
$scope.onsite_updated = onsite;
console.log("onsite has been selected");
}
else
{
$scope.onsite_updated = 0;
console.log("Weird has been selected");
}
return $scope.onsite_updated;
}
//offsite price
$scope.offsitePrice = function()
{
if($scope.offsite == true)
{
$scope.offsite_updated = offsite;
}
else
{
$scope.offsite_updated = 0;
}
return $scope.offsite_updated;
}
//ppc price
$scope.ppcPrice = function()
{
if($scope.ppc == true)
{
$scope.ppc_updated = ppc;
}
else
{
$scope.ppc_updated = 0;
}
return $scope.ppc_updated;
}
//marketing strategy
$scope.marketing_strategyPrice = function()
{
if($scope.marketing_strategy == true)
{
$scope.marketing_strategy_updated = marketing_strategy;
}
else
{
$scope.marketing_strategy_updated = 0;
}
return $scope.marketing_strategy_updated;
}
//email marketing
$scope.marketing_emailPrice = function()
{
if($scope.marketing_email == true)
{
$scope.marketing_email_updated = marketing_email;
}
else
{
$scope.marketing_email_updated = 0;
}
return $scope.marketing_email_updated;
}
//marketing strategy
$scope.marketing_eventPrice = function()
{
if($scope.marketing_event == true)
{
$scope.marketing_event_updated = marketing_event;
console.log("marketign event price " + marketing_event );
}
else
{
$scope.marketing_event_updated = 0;
}
return $scope.marketing_event_updated;
}
//check if design is included
//get smm price
$scope.smm_package_price_get = function()
{
//first detect what has been selected
var selectedPack = $scope.smm_package;
switch(selectedPack)
{
case "1":
//if selected monthly
$scope.packageName = "monthly";
$scope.packagePrice = "150";
break;
case "2":
//if selected weekly
$scope.packageName = "weekly";
$scope.packagePrice = "400";
break;
case "3":
//if selected weekly
$scope.packageName = "daily";
$scope.packagePrice = "1200";
break;
default:
$scope.packageName = "Nothing has selected yet";
break;
}
}
//show contact form before submission
$scope.quotCompleted = function()
{
//check for validation
if(validationCheck() == true)
{
$scope.showContact = true;
console.log("quotation has been completed");
//$scope.scrollTo('show_contact');
$scope.errorMsg = "";
}else
{
//FIND responsible box
$scope.errorMsg = errorMsg;
}
}
//process additinal information when submit button is clicked
$scope.web_quot_submit = function()
{
//validation
if(validationCheck() == true)
{
$scope.formData = {};
//find out if all required field has been filled
//if valid
if(1 == 1) //or add different validation...in this case it is always true
{
//object to hold all info submitted
var additional_personal = {
//find list of item along with price
final_price : $scope.price(),
//find additioal details
other_info : $scope.additional,
dev_budget : $scope.budget,
exampleSite : $scope.exampleSite,
content: $scope.content,
content_price: $scope.contentPrice(),
design: $scope.design,
design_price: $scope.designPrice(),
page_num: $scope.nopage,
seo:$scope.seo,
onsite_seo:$scope.onsite,
onsite_seo_price: $scope.onsitePrice(),
offsite_seo: $scope.offsite,
offsite_seo_price: $scope.offsitePrice(),
seo_budget: $scope.seo_budget,
competetors: $scope.competetors,
ppc : $scope.ppc,
ppc_price: $scope.ppcPrice(),
marketing: $scope.marketing,
marketing_strategy: $scope.marketing_strategy,
marketing_strategy_price: $scope.marketing_strategyPrice(),
marketing_email: $scope.marketing_email,
marketing_email_price : $scope.marketing_emailPrice(),
marketing_event: $scope.marketing_event,
marketing_event_price: $scope.marketing_eventPrice(),
marketing_budget: $scope.marketing_budget,
marketing_smm_advert: $scope.marketing_smm_advert,
smm_advertisement_budget: $scope.smm_advertisement_budget,
smm_package: $scope.packagePrice,
smm_budget: $scope.smm_budget,
//find personal details
name :$scope.name,
email : $scope.email,
phone : $scope.phone
};
$scope.info = additional_personal;
console.log($scope.info);
$scope.formData = additional_personal;
// test... remove this once test is done...find out if submission is ok
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url:'localhost/api/quotation/session',
type:'POST',
dataType:'json',
data: additional_personal,
success:function(data)
{
if(data){
console.log("session data :"+data.result);
if(data.result == true)
{
displayNotification();
}
else
{
alert("Something is wrong");
}
//insert into db
//alert("submitted : "+additional_personal);
console.log("data has been sent through ajax");
}else{
console.log("umm...the api was accessed but nothing was returned");
}
},
error:function(error)
{
console.log("there was an error with the api. Find a fallback");
}
});
//test ends
}else
{
//if not valid
console.log("not valid");
}
}
else
{
//validation error for email and name
alert("required Contact detail missing");
}
}
//little notification
var displayNotification = function()
{
var msg = "The quotation has been submitted";
$('#notification').html(msg);
}
//validation check
var validationCheck = function()
{
var validationVariable = true; //init variable
//check if a site has been selected
//if site_type class is present within dom that means it is pressed
if($scope.selectedVar == true)
{
if($('input[name="nopage"]').val() > 0 )
{
//if number of page input field has stuff init...then valid
validationVariable = true;
}
else
{
validationVariable = false;
errorMsg = " Number of pages required";
}
}
else
{
validationVariable = false;
errorMsg = " No site type has been selected";
}
//valid
console.log(errorMsg);
return validationVariable;
}
$scope.checkIfSelectedSeo = function()
{
if($scope.seo == true)
{
console.log("SEO SELECTED");
//display a box full of seo options
$scope.seoShow = true;
}
else
{
$scope.seoShow = false;
console.log("SEO not selected");
}
}
$scope.checkIfSelectedMarketing = function()
{
if($scope.marketing == true)
{
console.log("marketing SELECTED");
//display a box full of seo options
$scope.showMarketing = true;
}
else
{
$scope.showMarketing = false;
console.log("marketing not selected");
}
}
$scope.checkIfSelectedSocialMedia = function()
{
if($scope.smm == true)
{
console.log("smm SELECTED");
$scope.showSmm = true;
}
else
{
console.log("smm not SELECTED");
$scope.showSmm = false;
}
}
});
最佳答案
你是否为那段 HTML 设置了 Controller
<div ng-controller="webQuotationController">
<div step>
<!-- rest html here -->
</div>
</div>
<script>
app.directive('step', [function() {
return {
restrict: 'EA',
scope: {
stepChanging: '='
},
compile: function(element, attr) {
element.steps({
bodyTag: attr.bodyTag
});
return {
//pre-link
pre:function() {},
//post-link
post: function(scope, element) {
element.on('stepChanging', scope.stepChanging);
}
}
}
};
}]);
</script>
编辑:指令示例
关于javascript - ng-click 不适用于自定义指令，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44720361/