指令模板不在视图上显示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

回答

相关问题