Question

我希望我的指令响应DOM元素单击事件，该指令将调用返回字符串然后通过模板的服务（作用域上的公司详细信息属性返回字符串以及模板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")
        });
     }

Answer 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以获得您正在寻找的功能。

指令模板不在视图angularjs上显示

1 个答案: