指令模板不在視圖上顯示angularjs

我希望我的指令對DOM元素單擊事件作出響應，該指令將調用一個服務，該服務返回一個字符串，然後通過該模板（範圍上的公司詳細信息屬性返回字符串與指令模板不在視圖上顯示angularjs

目前的HTML模板，模板不會顯示在屏幕上，

指令

/// <reference path="../../Scripts/jquery-2.0.3.js" /> 

myAppModule.directive("displayCompanyDetails", function() { 
return { 
    restrict: "E", 
    template: "<div id='companyDetails' ng-model='companyDetails'></div>", 
    link: function (scope, element, attrs) { 

     $('.companyName').bind('click', function (event) { 
      scope.companyDetails = scope.GetCompanyDetails(this.id) 
     }); 

    } 

} 
});

查看

@foreach (var company in Model) 
    { 
     <div> 
      @Html.Label(company.Name, new { @class = "companyName", id = company.Company_Id }) 
      <p></p> 
     </div> 
    } 
</div> 

<div id="companyDetailsDiv" ng-controller="CompanyDetailsCtrl"> 
    <display-company-details /> 
</div> 

getCompanyDetails service method 
GetCompanyDetails: function (customerId) 
{ 
    $http.get("http://localhost:61503/Company/CompanyDetails/" +        
     customerId).success(function (data) 
    { 

     }).error(function() 
     { 
      alert("an unexpected error has occured") 
     }); 
    }

來源

2014-01-17 user3162979

點擊事件是否觸發？ – Beterraba

你可以發佈多一點你的代碼，也許是http://plnkr.co/上的一個工作（破碎）版本？ –

-1

這可不是用一條指令，但我認爲這是一個服務的功能，你正在尋找的類型：

HTML：

<body ng-app="myApp" ng-controller="MyController"> 

<div ng:repeat="company in companies" id="companyName" ng-click="getCompanyDetails(company.id);"> 
    <label><em>Name:</em> {{company.name}}</label> 
    <label><em>ID:</em> {{company.id}}</label> 
</div> 

<hr/> 

Address: {{details.address}}<p> 
Phone: {{details.phone}}

JS：

var myAppModule = angular.module("myApp", []); 
myAppModule.controller('MyController', function($scope, companyDetailsService) { 

    $scope.companies = [ 
     { name: 'company ABC', id:1}, 
     { name: 'company 123', id:2}, 
     { name: 'company XYZ', id:3}, 
    ]; 

    $scope.details = {}; 
    $scope.getCompanyDetails = function (id) { 
     $scope.details = companyDetailsService.GetCompanyDetails(id); 
    }; 
}); 

myAppModule.factory("companyDetailsService", function() { 

    return { 
    GetCompanyDetails: function(id) { 
     var companies = { 
     1: {address:"ABC main", phone:"6785309"}, 
     2: {address:"123 main", phone:"1234567"}, 
     3: {address:"XYZ main", phone:"9876543"} 
     }; 
     return companies[id]; 
    } 
    }; 
});

Full Plunk here。

您可能還想看看UI-Router和this quick tutorial以獲得您正在尋找的功能類型。

來源

2014-01-17 19:11:54

謝謝，我最終放棄了使用指令路由，而是直接在範圍內調用函數。像上面一樣。理想情況下，我希望返回一個html模板，一旦公司名稱被點擊，而不僅僅是價值。我會很感興趣的，看看如何使用一個指令來完成這個操作，然後返回一個模板。 – user3162979

指令模板不在視圖上顯示angularjs

回答

相關問題