个人中心
gpt4 book ai didi

angularjs - 从 Controller 将对象传递给 angularjs 指令

转载 作者：行者123 更新时间：2023-12-04 07:24:28 25 4
gpt4 key购买 nike

试图让我了解 AngularJS 指令。我需要将一个完整的对象从我的主 Controller 传递给指令。请参阅下面的代码和 jsfiddle:http://jsfiddle.net/graphicsxp/Z5MBf/4/

<body ng-app="myApp">
<div ng-controller="MandatCtrl">
    <div person myPerson="mandat.person"></div>

    <span>{{mandat.rum}}</span>
    <span>{{mandat.person.firstname}}</span>

</div>

和脚本: 
var myApp = angular.module("myApp", []);

myApp.controller("MandatCtrl", function ($scope) {
$scope.mandat = { rum: "15000", person: { id: 1408, firstname: "sam" } };
});

myApp.directive("person", function () {     
return {
    scope: {
        myPerson: "="
    },
    template: 'test: <div ng-model="myPerson"><input type="text" ng-model="firstname" /></div>'
}
});

好的，绑定(bind)适用于mandat.rum 和mandat.person.firstname。

但是，我试图将 mandat.person 传递给指令，但它不起作用。我知道我一定做错了什么，问题是什么？ :)

最佳答案

请参阅下面的工作副本

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>

  <link rel="stylesheet" href="style.css">
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
      <span>{{mandat.rum}}</span>
      <span>{{mandat.person.firstname}}</span>
    <input type="text" ng-model="mandat.person.firstname" />
    <my-directive mandateperson="mandat.person" >

      </my-directive>
    <script type="text/javascript">
        var app = angular.module('plunker', []);

        app.controller('MainCtrl', function ($scope) {
            $scope.mandat = { name: "John", surname: "Doe", person: { id: 1408, firstname: "sam" } };
        });


        app.directive('myDirective', function () {
            return {
                restrict: 'E',
                template: "<div><span>{{mandateperson.id}}<span><input type='text' ng-model='mandateperson.firstname' /></div>",
                replace: true,
                scope: { mandateperson: '=' }
                }
            }
        )
    </script>
</body>
</html>

关于angularjs - 从 Controller 将对象传递给 angularjs 指令，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15990122/

25 4 0
文章推荐： image-processing - 将YUV4:4:4转换为YUV4:2:2图像
文章推荐： graphviz - 将节点保留在特定集群中
文章推荐： image-processing - 台球 table 上的边缘检测
文章推荐： cluster-analysis - 结合不同的相似性来构建一个最终的相似性
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com