각도 지시어에서 템플릿에 값을 전달하는 방법은 무엇입니까?

카운트 다운 타이머에 대해이 코드를 발견했으며 약간 수정했습니다.각도 지시어에서 템플릿에 값을 전달하는 방법은 무엇입니까?

<div countdown='' date='January 1, 2018 12:00:00'>&nbsp;</div>

:이처럼 배치 지시자를 사용

<div class='time_division_container'> 
    <div class='digits_container'>{{ days }}</div> 
    <div class='label_container'>DAYS</div> 
</div> 
<div class='time_division_container'> 
    <div class='digits_container'>{{ hours }}</div> 
    <div class='label_container'>HOURS</div> 
</div> 
<div class='time_division_container'> 
    <div class='digits_container'>{{ minutes }}</div> 
    <div class='label_container'>MINUTES</div> 
</div> 
<div class='time_division_container'> 
    <div class='digits_container'>{{ seconds }}</div> 
    <div class='label_container'>SECONDS</div> 
</div>

angular.module('app').directive('countdown', [ 
    'Util', '$interval', function (Util, $interval) { 
     return { 
      restrict: 'A', 
      scope: { 
       date: '@' 
      }, 
      link: function (scope, element) { 
       var future; 
       future = new Date(scope.date); 
       $interval(function() { 
        var diff; 
        diff = Math.floor((future.getTime() - new Date().getTime())/1000); 

        var d = Util.dhms(diff); 
        var el = "<div class='time_division_container'><div class='digits_container'>"+d[0]+"</div><div class='label_container'>DAYS</div></div><div class='time_division_container'><div class='digits_container'>"+d[1]+"</div><div class='label_container'>HOURS</div></div><div class='time_division_container'><div class='digits_container'>"+d[2]+"</div><div class='label_container'>MINUTES</div></div><div class='time_division_container'><div class='digits_container'>"+d[3]+"</div><div class='label_container'>SECONDS</div></div>"; 

        return element.replaceWith(el); 
       }, 1000); 
      } 
     }; 
    } 
]).factory('Util', [ 
    function() { 
     return { 
      dhms: function (t) { 
       var days, hours, minutes, seconds; 
       days = Math.floor(t/86400); 
       t -= days * 86400; 
       hours = Math.floor(t/3600) % 24; 
       t -= hours * 3600; 
       minutes = Math.floor(t/60) % 60; 
       t -= minutes * 60; 
       seconds = t % 60; 
       return [days, hours, minutes, seconds]; 
      } 
     }; 
    } 
]);

는 기본적으로 나는 일이하고 싶어 모든이 템플릿의 일, 시간, 분, 초를 넣어하는 것입니다

템플릿을 표시했지만 타이머가 움직이지 않습니다. 무엇이 이것을 일으킬 수 있습니까? 도와주세요. 감사.

출처

2017-11-06 Paul

@은 단방향 데이터 바인딩 용입니다. 즉, 컨트롤러/지시문에서 값을 변경하면 뷰가 업데이트되지 않습니다.

양방향 데이터 바인딩에는 =을 사용하고 변경 사항을 반영합니다.

scope: { 
    date: '=' 
},

출처

2017-11-06 15:44:17 Zooly

흠 작동하지 않았습니다. – Paul

자세히 알려 주실 수 있습니까? – Zooly

글쎄, 난 그냥 element.html()와 element.replaceWith() 교체 지금 밝혀 졌 및 이제 괜찮아 – Paul

좋아요, 저는 새로운 각도입니다. 그냥 대신

return element.replaceWith(el);

의

return element.html(el);

을 시도하여 발견 지금은 작동합니다.

출처

2017-11-06 16:06:12 Paul

각도 지시어에서 템플릿에 값을 전달하는 방법은 무엇입니까?

답변

관련 문제