如何使用angularjs指令数据绑定一个MVC局部视图 [英] How to data-bind an mvc partial view using angularjs directives

查看：103
本文介绍了如何使用angularjs指令数据绑定一个MVC局部视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有以下angularjs指令：

  app.directive（partnersInfoView功能（$ HTTP）{
    返回{
        限制：'A'，
        链接：功能（$范围，元素）{
            $ http.get（/家/ PartnerInfoTab）//立即调用来检索部分
              .success（功能（数据）{
                  element.html（数据）; //使用响应代替该元素的内心
              }）;
        }
    };
}）;

这基本上进入一个MVC控制器，并返回一个局部视图

 公众的ActionResult PartnerInfoTab（）
{
    返回PartialView（../ ManagePartners / PartnerInfoTab）;
}

在我有以下声明父视图：

 ＆LT; D​​IV ID =genericControllerNG控制器=GenericController＆GT;
    ＆LT; D​​IV合作伙伴 - 信息 - 视图＆gt;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;

这是利用角指令呈现局部视图，到目前为止一切都很正常。里面我的角度genericController我有一个范围的变量：

  $ scope.Data =数据;

，其中数据是自带来自REST服务

响应JSON对象

JSON响应例如

  {[
    {名字：约翰，姓氏：李四}，
    {名字：安娜，姓氏：史密斯}，
    {名字：彼得，姓氏：琼斯}
]}

遇到的问题IM的是，我不能在指令模板中的$ scope.Data绑定变量：

 ＆LT; D​​IV ID =PartnerInfoTab＆GT;
    ＆LT; D​​IV CLASS =表单组＆GT;
        ＆LT;标签类=COL-MD-2控制标签＆GT;名称和LT; /标签＆gt;
        ＆LT; D​​IV CLASS =COL-MD-8＆GT;
            ＆LT;输入ID =txt_name级=表格控型=文本NG模型=Data.firstName＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;

我的问题是，你如何传递父范围的角度指令，以便能够数据绑定在局部视图中的元素。我在想什么？

先谢谢了。


解决方案

我看不出有任何使用手动取模板使用 $ http.get ，然后将其插入的到DOM。你可以简单地给 templateUrl 指令中的配置值和角度将获取模板和编译它。

  app.directive（partnersInfoView功能（$ HTTP）{
     返回{
           限制：'A'，
           templateUrl：'/家庭/ PartnerInfoTab'，
           链接：功能（范围，元素，属性）{
               //进行链接
           }
     };
}）;

和，你的 partnersInfoView 不产生孤立的范围。因此，您可以访问 partnersInfoView 的母公司范围值的值。看到下面的代码片段。

\r
\r

VAR应用= angular.module（'应用'，[]）;\r
\r
app.run（函数（$ templateCache）{\r
  //模拟/家庭/ PartnerInfoTab模板的取\r
  VAR模板='＆LT; D​​IV ID =PartnerInfoTab＆GT;' +\r
    '＆LT; D​​IV CLASS =表单组＆GT;' +\r
    '＆LT;标签类=COL-MD-2控制标签＆GT;名称和LT; /标签＆gt; +\r
    '＆LT; D​​IV CLASS =COL-MD-8＆GT;' +\r
    '＆LT;输入ID =txt_name级=表格控型=文本NG模型=数据[0] .firstName＆GT;' +\r
    '＆LT;输入ID =txt_name级=表格控型=文本NG模型=数据[1] .firstName＆GT;' +\r
    '＆LT;输入ID =txt_name级=表格控型=文本NG模型=数据[2] .firstName＆GT;' +\r
    '＆LT; / DIV＆GT;' +\r
    '＆LT; / DIV＆GT;' +\r
    '＆LT; / DIV＆GT;';\r
\r
  $ templateCache.put（'/家庭/ PartnerInfoTab'，模板）;\r
}）;\r
\r
app.controller（'GenericController'，函数（$范围）{\r
  $ scope.Data = [{\r
    名字：约翰，\r
    姓氏：李四\r
  }，{\r
    名字：安娜，\r
    姓氏：史密斯\r
  }，{\r
    名字：彼得，\r
    姓氏：琼斯\r
  }];\r
}）;\r
\r
app.directive（partnersInfoView功能（$ HTTP）{\r
  返回{\r
    限制：'A'，\r
    templateUrl：/家/ PartnerInfoTab\r
    链接：功能（$范围，元素）{\r
      //链接\r
    }\r
  };\r
\r
}）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT; D​​IV NG-应用=应用程序＆GT;\r
  ＆LT; D​​IV ID =genericControllerNG控制器=GenericController＆GT;\r
    ＆LT; D​​IV合作伙伴 - 信息 - 视图＆gt;＆LT; / DIV＆GT;\r
  ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r
\r

I have the following angularjs directive:

app.directive("partnersInfoView", function ($http) {
    return {
        restrict: 'A',
        link: function ($scope, element) {
            $http.get("/home/PartnerInfoTab") // immediately call to retrieve partial
              .success(function (data) {
                  element.html(data);  // replace insides of this element with response
              });
        }
    };
});

which basically goes to an MVC controller and returns a partial view

public ActionResult PartnerInfoTab()
{
    return PartialView("../ManagePartners/PartnerInfoTab");
}

in the parent view i have the following declaration:

<div id="genericController" ng-controller="GenericController">
    <div partners-info-view></div>
</div>

that is making use of the angular directive to render the partial view, so far everything works great. Inside of my angular genericController i have a scope variable:

$scope.Data = data;

where data it's a json object that comes as response from a Rest Service

Json Response e.g.

{[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]}

The issue im having is that i cannot bind the $scope.Data variable in the directive template:

 <div id="PartnerInfoTab">
    <div class="form-group">
        <label class="col-md-2 control-label">Name</label>
        <div class="col-md-8">
            <input id="txt_name" class="form-control" type="text" ng-model="Data.firstName">
        </div>
    </div>
</div>

My question is, How do you pass the parent scope to the angular directive in order to be able to data-bind the elements in the partial view. What am i missing ??

Thanks in advance.

解决方案

I don't see any use of fetching template manually using $http.get and then inserting it to DOM. you can simply give templateUrl value in directive configuration and angular will fetch the template and compile it for you.

app.directive("partnersInfoView", function ($http) {
     return {
           restrict: 'A',
           templateUrl: '/home/PartnerInfoTab',
           link: function (scope, element, attr) {
               // Do linking
           }
     };
});

And, your partnersInfoView does not create isolated scope. so, you can access values of partnersInfoView's parent scope value. see the below snippet.

var app = angular.module('app', []);

app.run(function($templateCache) {
  // Simulating the fetching of /home/PartnerInfoTab template
  var template = '<div id="PartnerInfoTab">' +
    '<div class="form-group">' +
    '<label class="col-md-2 control-label">Name</label>' +
    '<div class="col-md-8">' +
    '<input id="txt_name" class="form-control" type="text" ng-model="Data[0].firstName">' +
    '<input id="txt_name" class="form-control" type="text" ng-model="Data[1].firstName">' +
    '<input id="txt_name" class="form-control" type="text" ng-model="Data[2].firstName">' +
    '</div>' +
    '</div>' +
    '</div>';

  $templateCache.put('/home/PartnerInfoTab', template);
});

app.controller('GenericController', function($scope) {
  $scope.Data = [{
    "firstName": "John",
    "lastName": "Doe"
  }, {
    "firstName": "Anna",
    "lastName": "Smith"
  }, {
    "firstName": "Peter",
    "lastName": "Jones"
  }];
});

app.directive("partnersInfoView", function($http) {
  return {
    restrict: 'A',
    templateUrl: "/home/PartnerInfoTab",
    link: function($scope, element) {
      // linking
    }
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div id="genericController" ng-controller="GenericController">
    <div partners-info-view></div>
  </div>
</div>

这篇关于如何使用angularjs指令数据绑定一个MVC局部视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆