javascript - How to bind HTML component with ng-repeat based on a pre-defined condition -
i new angularjs. have made html component reused across whole app. let's component gives out basic info of product. basic structure of html below:
<div class="visible-sm-block"> <div class="row"> <div class="col-sm-2"> <img class="img-circle img-responsive" alt="image of product" ng-src="{{}}"/> </div> <div class="col-sm-10"> <label>{{productname}}</label> <p>{{companyname}}</p> <p>{{shippedto}}</p> </div> </div> </div> the product.js file goes as:
(function() { 'use strict'; angular .module('product') .directive('productdetails', productdetails); /** @nginject */ function productdetails() { var directive = { restrict: 'e', templateurl: 'app/components/productdetails/productdetails.html' }; return directive; } })(); the small html component reused across other html pages in app this:
<product-details></product-details> now problem cannot bind data html component when used across pages. controller pages in separate folder: app/productshipping/productshipping.controller.js tried using ng-controller="controller_name" in html component no result came. :( please help.
this interesting question. code given below. developing angular framework. let me know if need further assistance.
product.js file follows
"use strict"; angular.module("app",[]); angular.module("app").controller("productcontroller", ['$scope', function ($scope) { }]); angular.module("app").directive("tmhtml", function () { return { transclude: false, scope: { productname: '@', companyname: '@', shippedto: '@' }, controller: "productcontroller", templateurl: "/templates/hideshow.html" }; }); template html file follows
<html ng-app="app"> <head> <title></title> <link href="../content/bootstrap.min.css" rel="stylesheet" /> <script src="../scripts/jquery-1.10.2.js"></script> <script src="../scripts/bootstrap.js"></script> </head> <body ng-controller="productcontroller"> <div class="visible-sm-block"> <div class="row"> <div class="col-sm-2"> <img class="img-circle img-responsive" alt="image of product" ng-src="{{}}" /> </div> <div class="col-sm-10"> <label>{{productname}}</label> <p>{{companyname}}</p> <p>{{shippedto}}</p> </div> </div> </div> </body> </html> how reuse follows
<html ng-app="app"> <head> <title></title> <link href="../content/bootstrap.min.css" rel="stylesheet" /> <script src="../scripts/jquery-1.10.2.js"></script> <script src="../scripts/bootstrap.js"></script> <script src="../scripts/angular.js"></script> <script src="../js/product.js"></script> </head> <body> <div> <tm-html product-name="sankar" company-name="sankar" shipped-to="sankar"> </tm-html> </div> </body> </html>
Comments
Post a Comment