ng-click在自定義指令中不起作用

Question

我已經使用自定義指令初始化了一個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>

例如 ：

服務{{5 + 2}}

假定在此處打印Services 7，但可以打印

服務{{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; } } }); 

柱塞見這里

Answer 1

您是否為那段HTML設置了控制器

<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>

編輯：指令示例