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

例如:

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;
        }
    }
});

Plunker See here

Answer 1

你是否为那段 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>

编辑:指令示例